为了账号安全,请及时绑定邮箱和手机立即绑定

想了解一下,改变dom的style?

想了解一下,改变dom的style?

精慕HU 2021-02-17 12:11:48
<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 会报错?
查看完整描述

2 回答

?
慕斯709654

TA贡献1840条经验 获得超5个赞

首先:我们要纠正一个错误,相同id属性,一个页面最好只有一个。在你提供的代码中,出现了3个flashit是不正确的。相同的class属性是可以出现多个的。

其次:在for循环中,使用setInterval函数时,里面的变量 不能放在双引号中,那样它会被识别为字符串的,需要用“+”连接符对变量进行连接。请参考下面的示例。

根据你的代码,我做了适当修改。

示例效果为,红蓝颜色替换,你可以根据实际需求做一些适当变更。代码如下:

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

运行结果:



查看完整回答
反对 回复 2021-03-17
?
江户川乱折腾

TA贡献1851条经验 获得超5个赞

代码如下:
<!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>
望~~!



查看完整回答
反对 回复 2021-03-17
  • 2 回答
  • 0 关注
  • 345 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信