js操作cssスタイル

2463 ワード
css

操作要素のスタイル属性


1、フォーマットの比較：


デモコード:
css    ：    

background-color    

color  

font  

font-family  

font-weight  

.....    





JS    ：  

style.backgroundColor  

style.color 

style.font  

style.fontFamily  

style.fontWeight  

.....

2.DOMを使用したスタイルオブジェクト


JAvascriptスタイルシートには、埋め込みスタイルシート、インラインスタイルシート;外注スタイルシート.操作要素のstyleスタイルプロパティ(インライン)
cssスタイルプロパティとjavascriptスタイルプロパティの比較:
デモコード:
  background-color style.backgroundColor



  color style.color



  font style.font



  font-family style.fontFamily

属性名に2つ以上の単語がある場合は、アルパカの名前を付けます.
id="div 1"のCSSボーダー属性を"1 px solid red"に変更すると、背景色がgreenに変更されます.
デモコード:
var oDiv = document.getElementByIdx_x("div1");



oDiv.style.border = "1px solid red";



oDiv.style.backgroundColor = green;

DOMはstyleにいくつかの方法を提供した.
  • getPropertyValue--CSS属性の属性値の文字列値を返します.
  • getPropertyPriority()--CSSプロパティ・ルールに「!import」が指定されている場合は、文字列「!import」が返されます.そうでない場合は、空の文字列が返されます.
  • item(index)--指定したインデックスのCSS属性名を返します.
  • removeProperty--CSS定義からpropertyNameを削除します.
  • setProperty(propertyName,value,priority)--CSSプロパティpropertyNameをvalueとし、指定した優先度に設定します.

    • 外部スタイルシートおよびstyle要素のスタイルの操作
    DOMは、次のプロパティを持つスタイルシートオブジェクトを指定します.
  • disabled--スタイルシートがdisabledであるかどうかを示します.
  • href--外部スタイルシートのURL;
  • media--mediaプロパティで指定したスタイルシートを使用できるメディアタイプのリスト.
  • ownerNode--スタイルシートのDOMノード(または
    • Ubuntuにngrockをインストールする
    Ubuntu 16.04 LTS (64ビット版) にUnityを導入する方法