需要準(zhǔn)備的材料分別有:電腦、html編輯器、瀏覽器。
創(chuàng)新互聯(lián)主營(yíng)呼中網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP開發(fā),呼中h5小程序制作搭建,呼中網(wǎng)站營(yíng)銷推廣歡迎呼中等地區(qū)企業(yè)咨詢
1、首先,打開html編輯器,新建html文件,例如:index.html,編寫問題基礎(chǔ)代碼。
2、在index.html中的script標(biāo)簽,輸入js代碼:$('div').click(function () {$(this).css('color', 'blue');});。
3、瀏覽器運(yùn)行index.html頁面,此時(shí)點(diǎn)擊123所在的div,div會(huì)變?yōu)樗{(lán)色文本。
在頁面內(nèi)用JS操作CSS除非用AJAX,但操作頁面內(nèi)的樣式的話,是可以的。操作樣式分為改變直接樣式,改變className和改變cssText三種
一、局部改變樣式
調(diào)用方法:
改變className
div id="demo"測(cè)試/div
script
document.getElementById('demo').className="test";
/script
改變直接樣式
div id="demo"測(cè)試/div
script
document.getElementById('obj').style.backgroundColor="#003366";
/script
二、全局改變樣式
可以通過改變外鏈樣式的的href的值實(shí)現(xiàn)網(wǎng)頁樣式的實(shí)時(shí)切換
link rel = "stylesheet" type="text/css" id="css" href="firefox.css" /
span on click="javascript:document.getElementById('css').href = 'ie.css'"點(diǎn)我改變樣式/span
如果網(wǎng)頁中一個(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ì)大家有所幫助,多多支持腳本之家~
1、簡(jiǎn)單的方法,不管不顧,直接這樣就可以:
document.createStyleSheet().cssText
=
'標(biāo)簽{color:red;'
+
//
這個(gè)注釋只在當(dāng)前JS中幫助理解,并不會(huì)寫入CSS中
'width:300px;height:150px}'
+
'.類名{……}'
+
'#ID們{……}'
;
//完活。我喜歡分號(hào)這樣寫,和指令書寫的起始位置對(duì)齊比較好一點(diǎn),尤其是后面有其它語句的時(shí)候。
2、完善一點(diǎn)的方法,防止重復(fù)添加,可以通過添加樣式表ID并對(duì)其判斷來實(shí)現(xiàn):
if
(!document.styleSheets['要建立的樣式表ID如theforever'])
{
//先檢查要建立的樣式表ID是否存在,防止重復(fù)添加
var
ss
=
document.createStyleSheet();
ss.owningElement.id
=
'要建立的樣式表ID如theforever';
ss.cssText
=
'標(biāo)簽{display:inline-block;overflow:hidden;'
+
//
這個(gè)注釋只在當(dāng)前JS中幫助理解,并不會(huì)寫入CSS中
'text-align:left;width:300px;height:150px}'
+
'.類名{……}'
+
'#ID們{……}'
;
}
以上這篇用JavaScript動(dòng)態(tài)建立或增加CSS樣式表的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
選中標(biāo)簽,然后用style設(shè)置樣式
div?id="h5course"HTML5學(xué)堂(WX號(hào)),技術(shù)干貨文章分享/div
script
var?box?=?document.getElementById('h5course');
box.style.color?=?'#39f';
box.style.border?=?'2px?solid?#000';
/script
$("document").css("","");
$("document").css({
" ":" ",
" ":" "
});