JavaScriptで16進数の値を10進数に変換する
制作でカラーコードの値を取得して操作する要件があり、ちょうどいい勉強になったのでメモとして残しておきたいと思います。基数変換にはいろんなケースがありますが、今回は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進表記の方法 要素の取得方法まとめ
categories
- WordPress（61）
- JavaScript（49）
- Vue.js（48）
- CSS（46）
- jQuery（34）
- Nuxt.js（22）
- Sass（21）
- Gulp（17）
- webpack（16）
- PHP（14）
- HTML（14）
- GSAP（11）
- React（10）
- Vite（9）
- Pug（9）
- Laravel（8）
- Cordova（8）
- Linux（7）
- Next.js（6）
- Apache（5）
- Shopify（4）
- REST API（4）
- Node.js（4）
- Smarty（3）
- Git（3）
- JSON（3）
- その他プログラミング（3）
- Google Apps API（3）
- Bootstrap（3）
- 環境構築・システム（3）
- TypeScript（2）
- EJS（2）
- RMS（2）
- Docker（2）
- Instagram API（2）
- Excel VBA（2）
- SVG（1）
- Dart（1）
- ECカートASP（1）
- Markdown（1）
- AMP（1）
- Nginx（1）
- XML（1）
- shellscript（1）
- Ruby（1）
- MySQL（1）
