想了解一下，改变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 会报错？
精慕HU2回答
-
慕斯709654
首先：我们要纠正一个错误，相同id属性，一个页面最好只有一个。在你提供的代码中，出现了3个flashit是不正确的。相同的class属性是可以出现多个的。其次：在for循环中，使用setInterval函数时，里面的变量 i 不能放在双引号中，那样它会被识别为字符串的，需要用“+”连接符对变量进行连接。请参考下面的示例。根据你的代码，我做了适当修改。示例效果为，红蓝颜色替换，你可以根据实际需求做一些适当变更。代码如下：HTML代码：12345678<form id="form1"> <textarea cols="20" rows="8" name="flashit1" class="flashit" class="flashit" style="color:blue">闪烁的文字用来强调一些重要的文字 </textarea> <input type="text" value="文本框也可以" name="flashit" class="flashit" style="color:blue"> <input type="submit" name="flashit1" class="flashit" style="color:blue"></form>JavaScript代码：123456789101112var 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>望~~！
随时随地看视频慕课网APP
CSS3
Html5