何时该用DOM脚本设置样式-优快云博客

本文链接：https://blog.youkuaiyun.com/zhanglongxiang/article/details/48193385

本文介绍如何在不使用CSS的情况下，通过DOM操作轻松找到并修改文档中的特定元素样式，以实现对文档样式的增强。以实际代码为例，演示如何在HTML文件中通过JavaScript定位并应用样式到紧跟在h1元素后的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在绝大多数场合，还是应该使用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();
}
}
}