改变dom的style
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了改变dom的style相关的知识，希望对你有一定的参考价值。
<html>
<head>
<title>文字闪烁</title>
</head>
<body>
<form id="form1">
<div id="a">
文本框也可以
</div>
<textarea cols="20" rows="8" name="flashit1" id="flashit" style="color:blue">
闪烁的文字用来强调一些重要的文字
</textarea>
<br>
<input type="text" value="文本框也可以" name="flashit" id="flashit" style="color:blue">
<br>
<input type="submit" name="flashit1" id="flashit" style="color:blue">
</form>
<script type="text/javascript">
var flashelement=document.getElementById("form1");
for(i=0;i<flashelement.flashit.length;i++)
var tempvariable=setInterval("changecolor(i)",1000);
function changecolor(which)
if(flashelement.flashit[which].style.color=="")
alert("asd");
flashelement.flashit[which].style.color="red";
else
flashelement.flashit[which].style.color="";
</script>
</body>
</html>
这个if判断里为什么上style 会报错？
首先：我们要纠正一个错误，相同id属性，一个页面最好只有一个。在你提供的代码中，出现了3个flashit是不正确的。相同的class属性是可以出现多个的。
其次：在for循环中，使用setInterval函数时，里面的变量 i 不能放在双引号中，那样它会被识别为字符串的，需要用“+”连接符对变量进行连接。请参考下面的示例。
根据你的代码，我做了适当修改。
示例效果为，红蓝颜色替换，你可以根据实际需求做一些适当变更。代码如下：
HTML代码：
<form id="form1"><textarea cols="20" rows="8" name="flashit1" class="flashit" class="flashit" style="color:blue">闪烁的文字用来强调一些重要的文字
</textarea>
<br>
<input type="text" value="文本框也可以" name="flashit" class="flashit" style="color:blue">
<br>
<input type="submit" name="flashit1" class="flashit" style="color:blue">
</form>
JavaScript代码：
var flashelement=document.querySelectorAll("input, textarea");for (i = 0; i < flashelement.length; i++)
setInterval("changecolor(" + i + ")",1000);
function changecolor(which)
if(flashelement[which].style.color=="blue")
flashelement[which].style.color="red";
else
flashelement[which].style.color="blue";
运行结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="" type="text/javascript" charset="utf-8"></script>
<style>
*
/*margin: 0px;
padding: 0px;*/
.test1
width: 100%;
height: 22px;
line-height: 22px;
border: 2px solid #ccc;
</style>
</head>
<body>
<div class="test1">公告内容</div>
<br />
<button class="changestyle">更改样式</button>
<script>
$(function()
$(".changestyle").off("click").on("click",function()
$(".test1").css(
"font-size":"16px",
"font-weight":"bold",
"border":"2px solid blue",
"width":"200px",
"height":"100px",
"text-align":"center",
"line-height":"100px",
"color":"red"
);
);
);
</script>
</body>
</html>
望~~！
JavaScript HTML DOM - 改变CSS
改变 HTML 样式
//语法
document.getElementById(id).style.property=new style
<p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; </script>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>W3Cschool教程(w3cschool.cn)</title> 6 </head> 7 <body> 8 9 <h1 id="id1">我的标题 1</h1> 10 <button type="button" onclick="document.getElementById(‘id1‘).style.color=‘red‘">点我!</button> 12 13 </body> 14 </html>
以上是关于改变dom的style的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript HTML DOM——改变CSS（样式）