CSS-DOM:
style屬性是對象類型
nodeName是tring類型
如果文檔的内容需要定期編輯和重新整理 添加class屬性的工作就會變成一種負擔
如果文檔内容需要一個CMS來處理 給文檔内容的個别部分添加class屬性或者其他樣式的做法有時是不被允許的
font-size屬性要用元素.style.fontSize來檢索
考慮純粹用css還是用DOM設定樣式 需要考慮這些問題：
1最簡單的解決方案
2.那種解決方案得到更多浏覽器的支援
一般改變元素的呈現效果用css
改變某元素的行為用dom
如果是根據行為改變呈現效果 那就要考慮情況了 例子：+
響應事件： 可以使用僞class屬性允許我們根據html元素的狀态來改變樣式 比如
a：hover{
color：#c60；
} 這個僞類基本上隻是用來改變連結的樣式
利用DOM可以實作 滑鼠移動到某表格的行時字型加黑加粗
function rowsd(){
if(!document.getElementByTagName) return false;
var rows=document.getElementByTagName("tr");
for(var i=0;i<rows.length;i++){
rows[i].onmouseover=function(){
this.style.fontWeight="bold"; //指目前行
}
rows[i].onmouseout=function(){
this.style.fontWeight="normal";
}
)
}
addLoadEvent(rowsd);
元素的屬性style隻有在内聯的時候才可以檢索 如果script放在head或者css外部調用的時候 style是無法擷取資訊的
但是 還可以通過style來設定各種html呈現效果 是可以用style檢索的 你用dom設定的樣式也可以用dom來檢索 舉例：
function getNextElement(node) {
if(node.nodeType == 1) {
return node;
}
if (node.nextSibling) {
return getNextElement(node.nextSibling);
}
return null;
}
function xx(){
var headers=document.getElement("h1");
for(var i;i<headers.length;i++){
var elem=getNextElement(headers[i].nextSibling);
elem.style.fontWeight="bold";
elem.style.fontSize="1.2em"; //通過DOM來設定css 就可以通過style來檢索了
}
}
在事件發生時設定有關元素的樣式
根據某種條件反複設定某種樣式
html:
<body>
<table>
<caption>Itinerary</caption>
<thead>
<tr>
<th>When</th>
<th>Where</th>
</tr>
</thead>
<tbody>
<tr>
<td>June 9th</td>
<td>Portland, <abbr title="Oregon">OR</abbr></td>
</tr>
<tr>
<td>June 10th</td>
<td>Seattle, <abbr title="Washington">WA</abbr></td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento, <abbr title="California">CA</abbr></td>
</tr>
</tbody>
</table>
</body>
css：
body {
font-family: "Helvetica","Arial",sans-serif;
background-color: #fff;
color: #000;
}
table {
margin: auto;
border: 1px solid #699;
}
caption {
margin: auto;
padding: .2em;
font-size: 1.2em;
font-weight: bold;
}
th {
font-weight: normal;
font-style: italic;
text-align: left;
border: 1px dotted #699;
background-color: #9cc;
color: #000;
}
th,td {
width: 10em;
padding: .5em;
}
.odd {
background-color: #ffc;
}
js：
function stritable(){
if(!document.getElementByTagName) return false;
var tables=document.getElementByTagName("table");
var odd,rows;
for(var i=0;i<tables.length;i++){
odd=false;
rows=tables[i].getElementByTagName("tr");
for(var j=0;j<rows.length;j++){
if(odd){
rows[i].style.backgroundColor="#ffc";
odd=false;
}else{
odd=true;
}
}
}
}
但是這樣子 如果需要修改就需要尋找這個函數 然後修改 比較麻煩
可以采用這個方法：
elem.setAttribute("class","intro");
也可以用 className屬性完成 元素節點才有
元素.className=value；
這樣 在value樣式類中修改即可
可是這樣子就是直接覆寫掉了
如果想要追加可以這樣
elem.className+=" intro"; intro前面有空格
現在css樣式裡面添加一i套聲明 這樣隻要修改add就可以來改變樣式了
.add{
background-color:#ffc;
}
舉例：function stripeTables() {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
for (var i=0; i<tables.length; i++) {
var odd = false;
var rows = tables[i].getElementsByTagName("tr");
for (var j=0; j<rows.length; j++) {
if (odd == true) {
addClass(rows[j],"odd");
odd = false;
} else {
odd = true;
}
}
}
}
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName;
}
}
addLoadEvent(stripeTables);
要學會對函數進行抽象 可以增加通用性 如：
function stripeTables(Tag,Name) {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName(Tag);
for (var i=0; i<tables.length; i++) {
var odd = false;
var rows = tables[i].getElementsByTagName("tr");
for (var j=0; j<rows.length; j++) {
if (odd == true) {
addClass(rows[j],Name);
odd = false;
} else {
odd = true;
}
}
}
}
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)