筆記 JS設定CSS樣式的幾種方式

2021-08-19 21:15:46 字數 1949 閱讀 7475

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

element.classname += 'blue fb';

6. 設定csstext

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

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

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

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