OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

JavaScriptで16進数の値を10進数に変換する

最終更新日:2018.7.29 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進表記の方法 要素の取得方法まとめ
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram