js中巧用cssText屬性批量操作樣式

給一個(gè)HTML元素設(shè)置css屬性，如

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的友誼網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

復(fù)制代碼

代碼如下:

var

head=

document.getElementById("head");

head.style.width

=

"200px";

head.style.height

=

"70px";

head.style.display

=

"block";

這樣寫太羅嗦了，為了簡(jiǎn)單些寫個(gè)工具函數(shù)，如

復(fù)制代碼

代碼如下:

function

setStyle(obj,css){

for(var

atr

in

css){

obj.style[atr]

=

css[atr];

}

}

var

head=

document.getElementById("head");

setStyle(head,{width:"200px",height:"70px",display:"block"})

發(fā)現(xiàn)

Google

API

中使用了cssText屬性，后在各瀏覽器中測(cè)試都通過了。一行代碼即可，實(shí)在很妙。如

復(fù)制代碼

代碼如下:

var

head=

document.getElementById("head");

head.style.cssText="width:200px;height:70px;display:bolck";

和innerHTML一樣，cssText很快捷且所有瀏覽器都支持。此外當(dāng)批量操作樣式時(shí)，cssText只需一次reflow，提高了頁(yè)面渲染性能。

但cssText也有個(gè)缺點(diǎn)，會(huì)覆蓋之前的樣式。如

復(fù)制代碼

代碼如下:

div

style="color:red;"TEST/div

想給該div在添加個(gè)css屬性width

復(fù)制代碼

代碼如下:

div.style.cssText

=

"width:200px;";

這時(shí)雖然width應(yīng)用上了，但之前的color被覆蓋丟失了。因此使用cssText時(shí)應(yīng)該采用疊加的方式以保留原有的樣式。

復(fù)制代碼

代碼如下:

function

setStyle(el,

strCss){

var

sty

=

el.style;

sty.cssText

=

sty.cssText

+

strCss;

}

使用該方法在IE9/Firefox/Safari/Chrome/Opera中沒什么問題，但由于

IE6/7/8中cssText返回值少了分號(hào)

會(huì)讓你失望。

因此對(duì)IE6/7/8還需單獨(dú)處理下，如果cssText返回值沒";"則補(bǔ)上

復(fù)制代碼

代碼如下:

function

setStyle(el,

strCss){

function

endsWith(str,

suffix)

{

var

l

=

str.length

-

suffix.length;

return

l

=

str.indexOf(suffix,

l)

==

l;

}

var

sty

=

el.style,

cssText

=

sty.cssText;

if(!endsWith(cssText,

';')){

cssText

+=

';';

}

sty.cssText

=

cssText

+

strCss;

}

相關(guān)：

js中用cssText設(shè)置css樣式的簡(jiǎn)單方法

如果網(wǎng)頁(yè)中一個(gè)

id為“no”的標(biāo)簽，暫且當(dāng)div標(biāo)簽來tell；

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

var

obj

=

document.getElementByIdx_x_x('no');

obj.style.width

=

'400px';

obj.style.height

=

'300px';

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

一般情況下都會(huì)結(jié)合css來添加className或者改變className達(dá)到想要的效果，但是如果你create一個(gè)元素，難道還想這樣簡(jiǎn)單點(diǎn)？那就要想別的辦法了~

于是大家就寫了一個(gè)又一個(gè)的函數(shù)，經(jīng)典的兩個(gè)是：

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"});

當(dāng)然還有更簡(jiǎn)單的，cssText：

var

obj

=

document.getElementByIdx_x_x('no');

obj.style.cssText

=

"width:400px;

height:300px;";

當(dāng)然這種方法對(duì)于create的元素初始化css樣式來說很簡(jiǎn)單很方便。

以上就是小編為大家?guī)淼膉s中用cssText設(shè)置css樣式的簡(jiǎn)單方法的全部?jī)?nèi)容了，希望對(duì)大家有所幫助，多多支持腳本之家~

如何定義input標(biāo)簽中 type="text"的CSS樣式

可以用css3中新增的選擇器“[attribute=value]”來同時(shí)選中指定的屬性的標(biāo)簽。

1、新建html文檔，添加5個(gè)input標(biāo)簽，其中第一個(gè)和最后一個(gè)“type”屬性的屬性值為“text”：

2、在head標(biāo)簽和body標(biāo)簽之間添加style標(biāo)簽，添加代碼“input[type=text]”，“input”指的是標(biāo)簽名，“type”指的是屬性名，“text”指的是屬性值，這個(gè)就會(huì)把所有屬性名為“type”、屬性值為“text”的input標(biāo)簽選中：

3、為被選擇的標(biāo)簽設(shè)置背景色為紅色，這時(shí)屬性值為“text”的第一個(gè)標(biāo)簽和最后一個(gè)標(biāo)簽背景色都變成了紅色：

CSS樣式表怎么做

1、創(chuàng)建使用css樣式表有三種，分別是外部樣式表，內(nèi)部樣式表和內(nèi)聯(lián)樣式。下面通過一個(gè)小demo演示它們的用法，首先新建一個(gè)html文件，放入3個(gè)button按鈕，給前兩個(gè)按鈕分別設(shè)置class屬性為btn1和btn2：

2、接著準(zhǔn)備一個(gè)css文件，命名為demo.css，在文件內(nèi)寫入按鈕A的樣式，保存css文件：

3、回到剛才的html文件，在style標(biāo)簽中用link標(biāo)簽引入上一步創(chuàng)建的css文件，這就是外聯(lián)樣式的用法，總結(jié)就是創(chuàng)建好的css文件內(nèi)寫好樣式，然后在html文件中用link標(biāo)簽引入即可，這也是大部分網(wǎng)站使用的方法，因?yàn)槠湟敕奖悖芾砥饋硪脖容^方便：

4、接著是內(nèi)部樣式表的使用，這里直接在head標(biāo)簽里創(chuàng)建style標(biāo)簽，在里面加入btn2的樣式。對(duì)于內(nèi)部樣式表簡(jiǎn)單的html文件，內(nèi)部樣式是很方便的，但是結(jié)構(gòu)復(fù)雜的html文件使用它就會(huì)讓文件顯得很混亂：

5、最后是內(nèi)聯(lián)樣式的使用，直接在第三個(gè)標(biāo)簽內(nèi)使用style屬性加入樣式就可以了：

6、最后保存html文件，打開瀏覽器可以看到三個(gè)按鈕的樣式都出現(xiàn)了。以上就是css樣式表的制作方法：

是什么

這是添加css樣式用的嵌入式代碼。

style

type="text/css"

!--

--

/style

一般格式如上，把css的樣式寫入中間。

其中type=“text/css”是聲名了css樣式用文本寫成。

網(wǎng)站欄目：關(guān)于textcss樣式的信息
文章地址：http://chinadenli.net/article19/dsgcsgh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、標(biāo)簽優(yōu)化、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、靜態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)