js:
創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)公司一直秉承“誠(chéng)信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！專注中小微企業(yè)官網(wǎng)定制，網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)，塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。
el.style.display?=?'value'??//?el?為DOM元素，display為要設(shè)置的屬性（width，height，等，采用駝峰式命名法），value為想要設(shè)置的值
jQ
$('.class').css('name',?'value');
或者
$('.class').css({
name1:?value1,
name2:?value2,
'backgroud-color':?'red'
})
鍵值可以使用駝峰式命名法
1、直接更改，比如：
xID.style.display?=?"block";?//?更改display屬性，會(huì)覆蓋css中的定義。
xID.style.display?=?"";??????//?取消js更改display屬性，以css樣式為準(zhǔn)。
這里的xID，是通過(guò)id獲取的標(biāo)簽。當(dāng)然，也可能是通過(guò)tagName之類(lèi)的獲取的標(biāo)簽。
這種方式，簡(jiǎn)單直接。但是要修改大量的樣式的時(shí)候，不適合。所以，我更推薦第二種方式。
2、更改類(lèi)名
xID.className?=?"xx???yy";
如果有多個(gè)類(lèi)，就用空格隔開(kāi)。前提，在樣式中要有已有類(lèi)的定義。比如這里的xx和yy類(lèi)，在css中應(yīng)該是寫(xiě)好的。
這種方式把所有的樣式寫(xiě)在了css文件中，適合更改較多的樣式以及炫酷的樣式。js就只做一件事情：改類(lèi)。至于這個(gè)類(lèi)會(huì)把標(biāo)簽變成什么樣子，交給css吧。
通過(guò)jquery也可以達(dá)到如上的效果：
$("#xID").css({
fontSize:"12px",
display:"block"
});??//?直接更改樣式
$("#xID").addClass("xx");??//?增加刪除類(lèi)
$("#xID").removeClass("xx");
JS可以使用css屬性來(lái)進(jìn)行樣式修改，并且不僅可以修改單一屬性，也可以同時(shí)修改多個(gè)屬性。
案例
以下小案例使用JQuery作為演示。
前提： html頁(yè)面首先必須引入JQuery，放置在body體最后的位置。例如：
script?type="text/javascript"?src=""/script
html部分代碼
p
我是一個(gè)段落，我沒(méi)有背景顏色的，但是JQuery會(huì)給我增加背景顏色。
/p
button
點(diǎn)擊我，給上面段落添加黃色背景顏色。
/button
JQuery代碼
$("button").click(function(){
$("p").css("background-color",?"yellow");
});
修改多個(gè)屬性
$("button").click(function(){
$("p").css({"background-color":?"yellow",?"font-size":?"200%"});
});
結(jié)論與解釋：
首先使用Jquery選擇器進(jìn)行元素選擇 -?$("button")
為該元素綁定點(diǎn)擊事件 -?click
click中的匿名函數(shù)修改css屬性。
在css屬性的修改中，p段落有了黃色背景； 多個(gè)屬性修改，不但有了黃色背景而且字體是之前的兩倍大小。
注意事項(xiàng)：
可以不用非要綁定事件，在本案例中，綁定事件是為了更好地演示Jquery如何操作css屬性。
修改單一屬性和多個(gè)屬性的寫(xiě)法是有區(qū)別的，多個(gè)屬性使用{},屬性與值之間用：分割，屬性與屬性之間用，分割。
修改樣式
document.getELementById('div').style.fontSize = "20px";
修改寫(xiě)好的類(lèi)樣式
document.getELementById('div').className = "div";
通過(guò)js來(lái)改變CSS屬性，使用jQuery可以很方便的實(shí)現(xiàn)，像這樣：
$("img").css('border-color','red');
就可以把邊框顏色都變成紅色。
這是針對(duì)此問(wèn)題的測(cè)試頁(yè)面
2、這是3張圖片
img src=';fm=11gp=0.jpg'
img src=';fm=11gp=0.jpg'
img src=';fm=11gp=0.jpg'
3、這是圖片的樣式，邊框默認(rèn)為灰色。
img{
max-width:200px;
border-color:gray;
border-width:10px;
border-style:solid;
}
4、現(xiàn)在通過(guò)這幾行用到j(luò)Query的代碼，控制圖片邊框根據(jù)鼠標(biāo)移入移出邊框變灰和變紅。
$(function(){
$("img").on('mouseover',function(){
$(this).css('border-color','red');
}).on('mouseout',function(){
$(this).css('border-color','gray');
});
});
5、效果如圖
今天研究了一下JS的用setAttribute方法實(shí)現(xiàn)一個(gè)頁(yè)面兩份樣式表的效果，具體方法如下：
第一步：在連接樣式表的元素里定義一個(gè)id,例如
復(fù)制代碼
代碼如下:
link
href=”1.css”
rel=”stylesheet”
type=”text/css”
id=”css”
我定義的id是css。
第二步：寫(xiě)一個(gè)js函數(shù)，代碼如下：
復(fù)制代碼
代碼如下:
script
type=”text/javascript”
function
change(a){
var
css=document.getElementById(“css”);
if
(a==1)
css.setAttribute(“href”,”1.css”);
if
(a==2)
css.setAttribute(“href”,”2.css”);
}
/script
這個(gè)函數(shù)的code可以放在頁(yè)面的任何地方。
第三步：為改變頁(yè)面的樣式表的連接添加一個(gè)函數(shù)的觸發(fā)事件，代碼如下：
復(fù)制代碼
代碼如下:
a
href=”#”
onClick=”change(1)”1.css/a
a
href=”#”
onClick=”change(2)”2.css/a
該效果在IE和FF下均測(cè)試通過(guò)，相信大家看完后因該非常明了，利用這個(gè)方法我們可以讓瀏覽者自己選擇需要顯示的樣式表，比如年老者可以選擇一個(gè)字體較大的樣式表。這里需要注意的兩點(diǎn)是：
在這個(gè)例子中函數(shù)名function后面的名字不能為links或者link，如果為links或者link，樣式表將不被改變，具體什么原因我也不大清楚，可能是javascript的保留字符。
另外如果是改變整個(gè)頁(yè)面的樣式，你需要在樣式表文件里定義body的高度為100%
方法二：
第一步：導(dǎo)入兩套css文件
復(fù)制代碼
代碼如下:
link
rel="stylesheet"
type="text/css"
title="樣式A"
href="css/people1.css"
/
link
rel="alternate
stylesheet"
type="text/css"
title="樣式B"
href="css/people2.css"
/
第二步：寫(xiě)切換的js函數(shù)
復(fù)制代碼
代碼如下:
script
type="text/javascript"
var
title
=
"樣式A";
function
setStyle(){
//只是樣式A
和樣式B切換
if(title=="樣式A"){
title
=
"樣式B";
}else{
title
=
"樣式A";
}
var
i,links;
//用dom方法獲取所有l(wèi)ink元素
links
=
document.getElementsByTagName("link");
//判斷每個(gè)link元素中是否含有style字符串
，用來(lái)判斷此link元素為樣式表link
，同時(shí)判斷此link是否包含title屬性
for(i=0;
links[i];
i++){
if(links[i].getAttribute("rel").indexOf("style")
!=
-1
links[i].getAttribute("title")){
//把所有l(wèi)ink設(shè)為disabled
links[i].disabled
=
true;
//再來(lái)判斷title中是否有指定的title字符串
有則把當(dāng)前的link設(shè)為可視
即激活當(dāng)前的link
if(links[i].getAttribute("title").indexOf(title)
!=
-1){
links[i].disabled
=
false;
//alert("ok");
}
}
}
}
/script
第三步：在html標(biāo)簽中調(diào)用切換的js函數(shù)
復(fù)制代碼
代碼如下:
a
href="#"
onclick="setStyle();"
1/a
a
href="#"
onclick="setStyle();"2/a
a
href="#"
onclick="setStyle();"3/a
a
href="#"
onclick="setStyle();"4/a
a
href="#"
onclick="setStyle();"5/a
重慶分公司
重慶分公司
