何时该用DOM脚本设置样式
来源:互联网 发布:范志毅数据 编辑:程序博客网 时间:2024/05/17 04:55
在绝大多数场合,还是应该使用CSS去声明样式,不过,在使用CSS不方便的场合,还是可以利用DOM对文档的样式做一些小的增强。
现在,CSS还无法根据元素之间的相对位置关系找出某个特定的元素,但这对DOM来说却不是什么难题。我们可以利用DOM轻而易举地找出文档中的所有h1元素,然后再同样轻而易举地找出紧跟在每个h1元素后面的那个元素,并把样式添加给它。
test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Man bites dog</title>
</head>
<body>
<h1>Hold the front page</h1>
<p>This first paragraph leads you in.</p>
<p>Now you get the nitty-gritty of the story.</p>
<p>The most important information is delivered first.</p>
<h1>Extra!Extra!</h1>
<p>Further developments are unfoldiing.</p>
<p>You can read all about it here.</p>
<script src = "scripts/addLoadEvent.js"></script>
<script src = "scripts/styleHeaderSiblings.js"></script>
</body>
</html>
styleHeaderSliblings.js:
function styleHeadersSiblings()
{
if(!document.getElementsByTagName) return false;
var headers = document.getElementsByTagName("h1");
var elem;
for(var i=0; i<headers.length; i++)
{
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(styleHeadersSiblings);
addLoadEvent.js:
function addLoadEvent(func)
{
var oldonload = window.onload;
if(typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
现在,CSS还无法根据元素之间的相对位置关系找出某个特定的元素,但这对DOM来说却不是什么难题。我们可以利用DOM轻而易举地找出文档中的所有h1元素,然后再同样轻而易举地找出紧跟在每个h1元素后面的那个元素,并把样式添加给它。
test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Man bites dog</title>
</head>
<body>
<h1>Hold the front page</h1>
<p>This first paragraph leads you in.</p>
<p>Now you get the nitty-gritty of the story.</p>
<p>The most important information is delivered first.</p>
<h1>Extra!Extra!</h1>
<p>Further developments are unfoldiing.</p>
<p>You can read all about it here.</p>
<script src = "scripts/addLoadEvent.js"></script>
<script src = "scripts/styleHeaderSiblings.js"></script>
</body>
</html>
styleHeaderSliblings.js:
function styleHeadersSiblings()
{
if(!document.getElementsByTagName) return false;
var headers = document.getElementsByTagName("h1");
var elem;
for(var i=0; i<headers.length; i++)
{
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(styleHeadersSiblings);
addLoadEvent.js:
function addLoadEvent(func)
{
var oldonload = window.onload;
if(typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
0 0
- 何时该用DOM脚本设置样式
- DOM脚本设置样式
- 何时该用volatile?
- DOM-设置样式
- 何时该用CHAR,何时该用varchar2?
- 脚本 样式设置--滤镜
- Problem 63 何时该用glDrawTexiOES?
- 浅谈__declspec(selectany)该何时用
- 浅谈__declspec(selectany)该何时用
- rocketmq问题汇总-instanceName参数何时该设置?
- rocketmq问题汇总-instanceName参数何时该设置?
- DOM中的动态脚本和动态样式
- c++中何时该用“引用传递”,何时该用“值传递”
- javascript为DOM元素设置样式
- 13_为DOM元素设置样式
- [原创翻译]在何时该用什么方式编译WinCE
- 在何时该用什么方式编译WinCE
- 在何时该用什么方式编译WinCE
- make clean rm执行时忽略错误
- Mac常用快捷键备忘
- Android本地服务写法 及 生成脚本
- leetcode Best Time to Buy and Sell Stock
- jsp页面第一行报错问题
- 何时该用DOM脚本设置样式
- Java与持久相关的锁总结
- C++标准库set类型
- i++是否原子操作?并解释为什么?
- 支持向量机之序列最小最优化算法
- zabbix安装
- HDU 1201 18岁生日
- hdu 5038 Grade(简单模拟求解)2014 ACM/ICPC Asia Regional 北京 Online
- hdu1078+FatMouse and Cheese+DFS+记忆化搜索