CSS的一些基础（有待改进）

来源：互联网发布：机械模拟仿真软件编辑：程序博客网时间：2024/05/22 03:34

1）有三种方法来设置样式：

①根据某个标签，如：

p{...}

②根据特定的class属性，如：

.classname{...}

③根据特定的id，如：

#id{...}

2）什么时候用DOM方法来设置样式？

①比如需要根据相对位置来设置样式的时候，CSS不能很好地满足要求，这个时候可以考虑DOM方法：

//html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><script type="text/javascript" src="scripts/addLoadEvent.js"></script><title>Man bites dog</title><script type="text/javascript" src="scripts/styleHeaderSiblings.js"></script></head><body><h1>hold the 1st page</h1><p>this first paragraph leads u in</p><p>now u get the nitty-gritty of the story</p><p>the most...</p><h1>Extra! Extra!</h1><p>further developments...</p><p>u can read it here...</p></body></html>

//js

function addLoadEvent() {   var oldonload=window.onload;     if(typeof window.onload!='function'){          window.onload=func;      }      else{          window.onload=function(){              oldonload();              func();          }      }  }

//js

function styleHeaderSiblings(){var headers=document.getElementsByTagName("h1");for(var i=0;i<headers.length;i++){var elem=getNextElement(headers[i].nextSibling);elem.style.fontWeight="bold";elem.style.fontSize="1.2em";}}function getNextElement(node){if(node.nodeType==1){return node;}if(node.nextSibling){return getNextElement(node.nextSibling);}return null;}addLoadEvent(styleHeaderSiblings);

运行效果：

这样就只对标题的兄弟进行了设置，而没有干扰其他p节点。

②需要大量修改html，导致将来不易维护，可以使用DOM方法减轻负担：

//html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><link rel="stylesheet" type="text/css" media="screen" href="styles/format.css"/><title>Cities</title><script type="text/javascript" src="scripts/addLoadEvent.js"></script></head><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="oregen">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></html>

//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;}

使用CSS之前和之后对比：

但是如果还要细化这个效果，CSS会不方便（需要大量交替设置class属性），但是用DOM方法却很方便：

function stripeTables(){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){rows[j].style.backgroundColor="#ffc";odd=false;}else{odd=true;}}}}addLoadEvent(stripeTables);

思路是如果odd是true，设置颜色，改odd为false，如果odd是false，改成true，这样就可以交替显示颜色了，效果和前面一样。

③CSS伪属性可能得不到良好支持：
目前大多数浏览器都支持CSS伪属性，比如hover：

tr:hover{font-weight:bold;}

上面的CSS代码制造了鼠标悬停在表格中的内容时内容呈现黑体的效果，这也可以用DOM方法做（更普适）：

function highlightRows(){var rows=document.getElementsByTagName("tr");for(var i=0;i<rows.length;i++){rows[i].onmouseover=function(){this.style.fontWeight="bold";}row[i].onmouseout=function(){this.style.fontWeight="normal";}}}addLoadEvent(highlightRows);

但是我不知道搞错哪里了。。。。没效果orz

3）className属性
可以给一个节点的className属性赋一个值，然后在CSS中修改起来就方便了，这样就分离了js和CSS，即：通过js设置属性，然后再在CSS中通过这个属性设置样式。
例如：
//js

node.className="myname";

//css

.myname{...}

阅读全文

0 0