用js來動態設定css樣式,常見的有以下幾種
1. 直接設定style的屬性 某些情況用這個設定 !important值無效
如果屬性有'-'號,就寫成駝峰的形式(如textalign) 如果想保留 - 號,就中括號的形式 element.style['text-align'] = '100px';
element.style.height = '100px';2. 直接設定屬性(只能用於某些屬性,相關樣式會自動識別)
element.setattribute('height', 100);
element.setattribute('height', '100px');3. 設定style的屬性
element.setattribute('style', 'height: 100px !important');4. 使用setproperty 如果要設定!important,推薦用這種方法設定第三個引數
element.style.setproperty('height', '300px', 'important');5. 改變class 比如jq的更改class相關方法
因js獲取不到css的偽元素,所以可以通過改變偽元素父級的class來動態更改偽元素的樣式
element.classname = 'blue';6. 設定csstextelement.classname += 'blue fb';
element.style.csstext = 'height: 100px !important';7. 建立引入新的css樣式檔案element.style.csstext += 'height: 100px !important';
functionaddnewstyle(newstyle) ', 0);用js來動態設定css樣式,常見的有以下幾種
1. 直接設定style的屬性 某些情況用這個設定 !important值無效
如果屬性有'-'號,就寫成駝峰的形式(如textalign) 如果想保留 - 號,就中括號的形式 element.style['text-align'] = '100px';
element.style.height = '100px';2. 直接設定屬性(只能用於某些屬性,相關樣式會自動識別)
element.setattribute('height', 100);
element.setattribute('height', '100px');3. 設定style的屬性
element.setattribute('style', 'height: 100px !important');4. 使用setproperty 如果要設定!important,推薦用這種方法設定第三個引數
element.style.setproperty('height', '300px', 'important');5. 改變class 比如jq的更改class相關方法
因js獲取不到css的偽元素,所以可以通過改變偽元素父級的class來動態更改偽元素的樣式
element.classname = 'blue';6. 設定csstextelement.classname += 'blue fb';
element.style.csstext = 'height: 100px !important';7. 建立引入新的css樣式檔案element.style.csstext += 'height: 100px !important';
functionaddnewstyle(newstyle) ', 0);
JS設定CSS樣式的幾種方式
1.直接設定style的屬性某些情況用這個設定 important值無效 如果屬性有 號,就寫成駝峰的形式 如textalign 如果想保留 號,就中括號的形式 element.style text align 100px element.style.height 100px 2.直接設定屬性 只能...
原生JS設定CSS樣式的幾種方式
用js來動態設定css樣式,常見的有以下幾種 1.直接設定style的屬性 某些情況用這個設定 important值無效 如果屬性有 號,就寫成駝峰的形 式 如textalign 如果想保留 號,就中括號的形式 element.style text align 100px element.style...
Js中設定css樣式
css div.style style js window.onload function false script html div 按鈕 button body 方法1.使用obj.style來修改css obj.style.屬性名 屬性值 此方法設定的是內聯樣式,而且有 時需要使用駝峰命名法 ...