MENU

JavaScript正規表現DOM

【JavaScript】 cssプロパティ名をキャメルケースに変換する正規表現

更新日:2021/08/27

 

CSSのプロパティ名をJavaScriptで使用する場合、キャメルケースという表記方法を用いることがあります。

 

そこで、正規表現を使用してプロパティ名とキャメルケースの相互変換をしてみます。

 

cssプロパティ名をキャメルケースに変換

 

cssプロパティ名をキャメルケースに変換するには、正規表現で "-" の後に小文字のアルファベットが続くか所を検索します。
次に、アルファベット部分を大文字に変換し、正規表現で検索された文字列と置き換えます。

 

文字列の置き換えは、replaceメソッドを使用します。

 

キャメルケース変換関数

 


const camelCase = text => text.replace( /-([a-z])/g , e => e[1].toUpperCase() );

 

上手く変換できるか、確認してみます。

 

確認

 


const cssProp = [ "border" , "border-top" , "border-top-color"  ];

cssProp.forEach( text => console.log( `${text} → ${camelCase(text)}` ) );

 

実行すると、次のような文字が出力されます。

 

border → border
border-top → borderTop
border-top-color → borderTopColor

 

想定通りの結果になりました。

キャメルケースをcssプロパティ名に変換

 

前項で変換したキャメルケースのプロパティ名を、元のCSSでのプロパティ名へ戻してみます。

 

こちらは単純にアルファベットの大文字を正規表現で検索して小文字に変換し、"-"と変換後の文字で置き換えます。

 

キャメルケースをCSSプロパティに変換する関数

 


const cssCase = text => text.replace( /([A-Z])/g , e => "-" + e[0].toLowerCase() );

 

上手く変換できるか、確認してみます。

 

確認

 


const cssProp = [ "border" , "border-top" , "border-top-color"  ];

cssProp.forEach( text => console.log( `${text} → ${camelCase(text)}  → ${cssCase(camelCase(text))}` ) );

 

実行すると、次のような文字が出力されます。

 

border → border → border
border-top → borderTop → border-top
border-top-color → borderTopColor → border-top-color

 

こちらも想定通りとなりました。

cssプロパティのままでもアクセスできる

 

今回紹介した関数を利用してスタイル属性を変更する場合、配列形式でアクセスする必要があります。

 

キャメルケースに変換してスタイル変更

 


div.style[camelCase("border-color")] = "red";

 

実はDOM要素のスタイル属性は、次のように配列形式でアクセスすることで、キャメルケースを使用しなくても変更できます。

 

キャメルケースを使用しないでスタイル変更

 


div.style["border-color"] = "red";

 

スタイル属性変更のためにキャメルケースに変換するのは、あまり意味のない行為ですね。

 

 

ただしanimateメソッドなどのように、プロパティをキーとしたオブジェクトを引数として受け付けるメソッドでは、キャメルケースを使用する必要があります。

 


div.animate( {
        backgroundColor : ["#fff","#000","#f00"],
        "border-radius" : [ "0" , "50px" , "0" ], // ← 動作しない
        marginLeft : [ "0" , "300px" , "0" ]
} , 2000 );

 

今後の改版で使用できる可能性がありますが、しばらくはキャメルケースを使用することになりそうです。

 

けーちゃんおススメJavaScript入門書

  • スラスラ読める JavaScript ふりがなプログラミング
  • プログラム未経験者がJavaScript始めるならコレ!
    コードを掲載して自分で理解しろという投げっぱなしな入門書とは異なり、コードに一つ一つどんなことをやっているかをふりがなという形式で解説しています。
    それでいてJavaScriptの基礎と応用を学べる良書です。
  • これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん
  • JavaScriptの機能を実践で活かすにはHTMLやCSSの知識が不可欠です。
    しかしそれらの知識があることが前提として書かれている書籍が多い中、この本は総合的な知識を身に着けることができます。
    HTMLやCSSの知識も不安な方には、ぴったりの一冊です
  •  

    入門書の役割は、自分のやりたいことをネットで調べることができるようになるための、基礎的な知識の獲得です。
    まずはこれらの本でしっかりと基礎知識を身につけましょう。
    そしてもっと高度なことや専門的なことはネットで調べ、情報が足りないと感じたら書籍を購入してください。


    記事の内容について

     

    こんにちはけーちゃんです。
    説明するのって難しいですね。


    「なんか言ってることおかしくない?」
    たぶん、こんなご意見あると思います。

    裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

    そんなときは、ご意見もらえたら嬉しいです。

    ご意見はこちら。
    https://note.affi-sapo-sv.com/info.php

    【お願い】

    お願い

    ■このページのURL


    ■このページのタイトル


    ■リンクタグ


    ※リンクして頂いた方でご希望者には貴サイトの紹介記事を作成してリンクを設置します。
    サイト上部の問い合わせよりご連絡ください。
    ただしサイトのジャンルによっては、お断りさせていただくことがあります。