首頁猿問想了解一下，改變dom的style？

想了解一下，改變dom的style？

CSS3 Html5

精慕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">閃爍的文字用來強(qiáng)調(diào)一些重要的文字</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>這個(gè)if判斷里為什么上style 會(huì)報(bào)錯(cuò)？

查看完整描述

2 回答

慕斯709654

TA貢獻(xiàn)1840條經(jīng)驗(yàn) 獲得超5個(gè)贊

首先：我們要糾正一個(gè)錯(cuò)誤，相同id屬性，一個(gè)頁面最好只有一個(gè)。在你提供的代碼中，出現(xiàn)了3個(gè)flashit是不正確的。相同的class屬性是可以出現(xiàn)多個(gè)的。

其次：在for循環(huán)中，使用setInterval函數(shù)時(shí)，里面的變量 i 不能放在雙引號(hào)中，那樣它會(huì)被識(shí)別為字符串的，需要用“+”連接符對(duì)變量進(jìn)行連接。請(qǐng)參考下面的示例。

根據(jù)你的代碼，我做了適當(dāng)修改。

示例效果為，紅藍(lán)顏色替換，你可以根據(jù)實(shí)際需求做一些適當(dāng)變更。代碼如下：

HTML代碼：

12345678 <form id="form1"> <textarea cols="20" rows="8" name="flashit1" class="flashit" class="flashit" style="color:blue">閃爍的文字用來強(qiáng)調(diào)一些重要的文字 </textarea> <input type="text" value="文本框也可以" name="flashit" class="flashit" style="color:blue"> <input type="submit" name="flashit1" class="flashit" style="color:blue"></form>

JavaScript代碼：

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

運(yùn)行結(jié)果：

反對(duì) 回復(fù) 2021-03-17

江戶川亂折騰

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超5個(gè)贊

代碼如下：
<!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">公告內(nèi)容</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>
望~~！