blocks|key|600548|text|function+abc()+{
++++var+color+=+document.getElementById("test").style.color;
++++if+(color+===+"red")
+++++++++document.getElementById("test").style.color="black";
++++else
+++++++++document.getElementById("test").style.color="red";
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|600549|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function abc() {
 var color = document.getElementById("test").style.color;
 if (color === "red")
 document.getElementById("test").style.color="black";
 else
 document.getElementById("test").style.color="red";
}
</code></pre>

blocks|key|600582|text|您可以先检查颜色，然后再单击进行更改。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|600583|function+abc(){
+++++var+color+=+document.getElementById("test").style.color;
+++++if(color==''){
+++++++++//change
+++++}else{
+++++++++//change+back
+++++}
}|code-block|syntax|javascript|600584|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

you may check the color before you click to change it.

<pre><code>function abc(){
 var color = document.getElementById("test").style.color;
 if(color==''){
 //change
 }else{
 //change back
 }
}
</code></pre>

blocks|key|600617|text|有一些逻辑来检查颜色或有一些标志，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|600618|function+abc()+{
++++var+currentColor+=+document.getElementById("test").style.color;

++++if(currentColor+==+'red'){
++++document.getElementById("test").style.color="black";
++++}else{
+++document.getElementById("test").style.color="red";

++++}
}|code-block|syntax|javascript|600619|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Have some logic to check the color or have some flag,

<pre><code>function abc() {
 var currentColor = document.getElementById("test").style.color;

 if(currentColor == 'red'){
 document.getElementById("test").style.color="black";
 }else{
 document.getElementById("test").style.color="red";

 }
}
</code></pre>

blocks|key|384781|text|一个简单的switch语句就可以做到这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|384782|function+abc()+{
++++var+elem=document.getElementById('test'),color;
++++switch(elem.style.color)+{
++++++++case('red'):
++++++++++++color='black';
++++++++++++break;
++++++++case('black'):
++++++++default:
++++++++++++color='red';
++++}
++++elem.style.color=color;
}|code-block|syntax|javascript|384783|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

A simple switch statement should do the trick:

<pre><code>function abc() {
 var elem=document.getElementById('test'),color;
 switch(elem.style.color) {
 case('red'):
 color='black';
 break;
 case('black'):
 default:
 color='red';
 }
 elem.style.color=color;
}
</code></pre>

blocks|key|384785|text|function+abc()+{
++++var+color+=+document.getElementById("test").style.color;
++++color+=+(color=="red")+?+"black"+:+"red"+;
++++document.getElementById("test").style.color=+color;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|384786|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function abc() {
 var color = document.getElementById("test").style.color;
 color = (color=="red") ? "black" : "red" ;
 document.getElementById("test").style.color= color;
}
</code></pre>

blocks|key|384811|text|最好更改元素的类(.regular为黑色，.alert为红色)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|384812|function+abc(){
++var+myDiv+=+document.getElementById("test");
++if+(myDiv.className+==+'alert')+{
++++myDiv.className+=+'regular';
++}+else+{
++++myDiv.className+=+'alert';
++}
}|code-block|syntax|javascript|384813|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Better change the class of the element (.regular is black, .alert is red):

<pre><code>function abc(){
 var myDiv = document.getElementById("test");
 if (myDiv.className == 'alert') {
 myDiv.className = 'regular';
 } else {
 myDiv.className = 'alert';
 }
}
</code></pre>

blocks|key|600672|text|使用jQuery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|600673|$(document).ready(function(){
++++$('div').click(function(){
++++++++$(this).toggleClass('clicked');
++++});
});​|code-block|syntax|javascript|600674|Live+example|offset|length|600675|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/jackdent/L6VqK/9/^0|0|0|0|C|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Using jQuery: 

<pre><code>$(document).ready(function(){
 $('div').click(function(){
 $(this).toggleClass('clicked');
 });
});​
</code></pre>

<a href="http://jsfiddle.net/jackdent/L6VqK/9/" rel="nofollow">Live example</a>

I want that <code>part 1</code> onclick div style changes and <code>part 2</code> again on click it comes back to normal. I tried doing so but I failed to achieve the <code>part 2</code> results. 

Following is the Javascript code

<pre><code>function abc() {
 document.getElementById("test").style.color="red";
}
</code></pre>

After clicking the test div again, color should come back to defaulr color i.e. black...

Javascript change Div style

jQuery

我希望part 1的onclick div样式改变，并在单击时再次part 2，它会恢复正常。我尝试过这样做，但是我没有达到part 2的结果。以下是Javascript代码function abc() {    document.getElementById("test").style.color="red";}再次...

问Javascript更改Div样式
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript更改Div样式EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript更改Div样式
EN