js讀寫css樣式的方法匯總,css書寫方式

本文目錄一覽：

• 1、js中用cssText設置css樣式的簡單方法
• 2、如何用js控制網頁中的css樣式
• 3、JS設置css方法
• 4、JS 動態修改CSS 樣式方法/全局
• 5、怎麼在js中給文本框添加CSS樣式

js中用cssText設置css樣式的簡單方法

如果網頁中一個

id為“no”的標籤，暫且當div標籤來tell；

想要在js中設置這個div的css樣式，很一般的做法是：

var

obj

=

document.getElementByIdx_x_x(‘no’);

obj.style.width

=

‘400px’;

obj.style.height

=

‘300px’;

如果要設置一堆又一堆的css樣式呢，太麻煩了把、

一般情況下都會結合css來添加className或者改變className達到想要的效果，但是如果你create一個元素，難道還想這樣簡單點？那就要想別的辦法了~

於是大家就寫了一個又一個的函數，經典的兩個是：

var

obj

=

document.getElementByIdx_x_x(‘no’);

function

setStyle(obj,

css)

{

for(var

attr

in

obj){

obj.style[attr]

=

css[attr];

}

}

setStyle(obj,{width:”400px”,height:”300px”});

當然還有更簡單的，cssText：

var

obj

=

document.getElementByIdx_x_x(‘no’);

obj.style.cssText

=

“width:400px;

height:300px;”;

當然這種方法對於create的元素初始化css樣式來說很簡單很方便。

以上就是小編為大家帶來的js中用cssText設置css樣式的簡單方法的全部內容了，希望對大家有所幫助，多多支持腳本之家~

如何用js控制網頁中的css樣式

直接使用Medias Query來實現，在css樣式表中直接用

@media(min-width:1200px){

/*這裡是大於1024的代碼。舉例如下 ：*/

body{ width:1024px;}

}

兼容所有瀏覽器，這個實現的叫做響應式布局

JS設置css方法

如果你用了jQuery庫，參考樓上的，否則用下面的代碼：

function bj(){

var divNodes = document.getElementsByTagName(“div”);

for(var i=0,j=divNodes.length;ij;i++){

var divObj = divNodes[i];

if(divObj.className == “caa” || divObj.className == “cab”) {

divObj.style.background = “url(xx.jpg) no-repeat fixed left top”;

}

}

}

JS 動態修改CSS 樣式方法/全局

如何配置自行百度

1.scss文件定義變量

2.js中更改$textColor 變量的值

都是獲取DOM

通過DOM分別修改當前DOM樣式屬性值、

當前DOM整體css樣式、

修改當前DOM的className類名、

將link引入的標籤作為DOM 修改link的href，從而修改引用的樣式表。

詳情轉自：

怎麼在js中給文本框添加CSS樣式

在頁面內用JS操作CSS除非用AJAX，但操作頁面內的樣式的話，是可以的。操作樣式分為改變直接樣式，改變className和改變cssText三種

一、局部改變樣式

調用方法：

改變className

div id=”demo”測試/div

script

document.getElementById(‘demo’).className=”test”;

/script

改變直接樣式

div id=”demo”測試/div

script

document.getElementById(‘obj’).style.backgroundColor=”#003366″;

/script

二、全局改變樣式

可以通過改變外鏈樣式的的href的值實現網頁樣式的實時切換

link rel = “stylesheet” type=”text/css” id=”css” href=”firefox.css” /

span on click=”javascript:document.getElementById(‘css’).href = ‘ie.css'”點我改變樣式/span