javascript ベンダープレフィック付きのCSSを変更する
- 2021.01.20
- javascript
- javascript

javascriptで、styleメソッドをチェーンメソッドで使用して、ベンダープレフィック付きのCSSを変更するサンプルコードを記述してます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 84.0.4147.105
styleメソッド使い方
styleメソッドを使用する際に、「-webkit-transform」のベンダープレフィックが付いたCSSの変更は、「-」を削除して「キャメルケース(webkitTransform)」で記述する必要があります。
1 |
document.getElementById('foo').style.webkitTransform = 'rotate(100deg)'; |
サンプルコード
以下は、
「実行」ボタンをクリックすると、id「foo」に適応されているCSS「-webkit-transform」と「-moz-transform」を変更する
サンプルコードとなります。
※cssには「bootstrap5」を使用してます。「bootstrap5」は、IEのサポートを終了してます。関数はアロー関数を使用してます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>mebeeサンプル</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"> </head> <style> .main { margin: 0 auto; margin-top: 200px; display: flex; flex-direction: column; align-items: center; font-size: 30px; } div { width: 200px; padding: 20px; margin-bottom: 50px; } #foo { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); } </style> <script> const hoge = () => { // ハイフンを外してキャメルケースで記述する foo.style.webkitTransform = 'rotate(90deg)'; // document.getElementById('foo');を省略 foo.style.mozTransform = 'rotate(90deg)'; // document.getElementById('foo');を省略 // テキストを変更 foo.innerHTML = '90deg'; } window.onload = () => { // クリックイベントを登録 btn.onclick = () => { hoge(); }; // document.getElementById('btn');を省略 } </script> <body> <div class="main container"> <div id="foo"> 45deg </div> <div class="row"> <button id="btn" type="button" class="btn btn-warning"> 実行 </button> </div> </div> </body> </html> |
CSSが変更されていることが確認できます。

-
前の記事
php 複数の連想配列の差分を取得する 2021.01.19
-
次の記事
rails6 webpackerでCSSを使う 2021.01.20
コメントを書く