JavaScriptで16進数の値を10進数に変換する
最終更新日: Update!!
制作でカラーコードの値を取得して操作する要件があり、ちょうどいい勉強になったのでメモとして残しておきたいと思います。基数変換にはいろんなケースがありますが、今回は16進数から10進数に変換する方法になります。カラーコード値を例にコードを書くとこんな感じです。
【HTML】※一部省略
#<span>45dce4</span> #<span>fc8ad3</span> #<span>b984e1</span> #<span>07da84</span>【javascript】
var val = document.querySelectorAll('span'); val.forEach(function(elem){ var hex = elem.textContent; var decimal = parseInt(hex,16); console.log("16進数:",hex); console.log("10進数:",decimal); });【Console】
16進数:45dce4 10進数:4578532 16進数:fc8ad3 10進数:16550611 16進数:b984e1 10進数:12158177 16進数:07da84 10進数:514692実際にやってみると結構簡単にできました。今回は複数存在する場合になります。コードになるテキストを要素から取得して、parseInt()の第一引数に格納し、第二引数に16と指定するだけでOKです。すごく限定的なものですが、応用することで意外と使える場面が出てくるかもしれません。。また、こちらの記事「JavaScriptでHEX値をRGB値に変換する仕組みを作成する」では今回の内容を応用して実際にカラーコードを変換できる仕組みを作っています。 (参考にさせて頂いたサイト) 【JavaScript】10進数と16進数の相互変換と16進表記の方法 要素の取得方法まとめ
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories