原生JS設定CSS樣式的幾種方式

2022-06-12 10:48:10 字數 1421 閱讀 1329

用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';

element.classname += 'blue fb';

6. 設定csstext

element.style.csstext = 'height: 100px !important';

element.style.csstext += 'height: 100px !important';

7. 建立引入新的css樣式檔案

functionaddnewstyle(newstyle) 

}addnewstyle('.box ');

8. 使用addrule、insertrule// 在原有樣式操作

document.stylesheets[0].addrule('.box', 'height: 100px');

document.stylesheets[0].insertrule('.box ', 0);// 或者插入新樣式時操作

var styleel = document.createelement('style'),

stylesheet = styleel.sheet;

stylesheet.addrule('.box', 'height: 100px');

stylesheet.insertrule('.box ', 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.屬性名 屬性值 此方法設定的是內聯樣式,而且有 時需要使用駝峰命名法 ...