[英]Switch background color of a div between 2 colors on alternate clicks
我有一个ID为“盒子”的div。 其初始背景颜色设置为#ff7700
。 我想创建一个函数“function1()”来执行以下操作:
#ff0077
#ff7700
#ff0077
#ff7700
,依此类推。 码:
<style>
#box{
background-color: #ff7700;
cursor: pointer;
}
</style>
<div id="box" onClick="function1()" > Inner HTML</div>
我试着写一个函数,但它不起作用。
<script>
function function1(){
var check = document.getElementById("box").style;
check2=check.backgroundColor;
if (check2 != "#ff0077"){
check2="#ff7700";
} else {
check2="#ff0077";
}
}
</script>
请告知任何其他方法。 我想坚持使用核心JS而不是使用Jquery。
最好使用布尔值作为切换:
var div = document.getElementById("box"), toggle = false; div.onclick = function() { toggle = !toggle; // invert toggle div.style.background = toggle? "#ff0077": "#ff7700"; // change background color depending on the value of toggle } div.style.background = "#ff7700"; // give the div an initial background
<div id="box">Inner HTML</div>
我用jQuery做了一个简单的例子。 我希望我有所帮助。
基本上我得到一个带有“.myDiv”类的元素并向其添加一个click事件。 始终单击元素“toggleClass()”方法切换类。
$(document).ready(function(){ $(".myDiv").bind("click", function(){ $(this).toggleClass("myClass"); }); });
.myDiv{ padding: 1em; font-family: "Helvetica", sans-serif; line-height: 1.5em; background: #cccccc; } .myClass{ background: red; color: white; }
<div class="myDiv"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda facere, cumque aliquam quis aut, velit quidem, repellendus quo maiores saepe unde sed reprehenderit laborum? Eum laborum possimus quidem, ea non.</p> </div> <!--jQuery Libary--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
background-color: #ff7700;
来自css选择器#box
A
和B
并相应地放置背景颜色 var domEl = document.getElementById("box");
之后如果domEl.className==="A"
则为其分配"B"
,否则分配"A"
.style
属性不返回十六进制颜色代码。 您可以使用window.getComputedStyle()
来获取计算出的CSS
属性,将颜色设置为rgb()
值
<style> #box { background-color: #ff7700; cursor: pointer; } </style> <script> function function1() { if ( window.getComputedStyle(box).backgroundColor === "rgb(255, 119, 0)") { box.style.backgroundColor = "rgb(255, 0, 119)"; } else { box.style.backgroundColor = "rgb(255, 119, 0)"; } } onload = function() { const box = document.getElementById("box"); } </script> <div id="box" onClick="function1()"> Inner HTML</div>
您将使用getComputedStyle()获取元素的颜色,这将返回您的颜色为rgb()
格式。 如果您需要将rgb()
更改为hex
在此帖子上了解更多信息 。
这是一个例子
function function1(){ var check = document.getElementById("box"); var color = window.getComputedStyle(check, null).getPropertyValue('background-color'); if (color != "rgb(255, 119, 0)"){ check.style.backgroundColor = "rgb(255, 119, 0)"; } else { check.style.backgroundColor = "rgb(255, 255, 255)"; } }
#box{ background-color: #ff7700; cursor: pointer; }
<div id="box" onclick="function1()">Inner HTML</div>
使用内联js代码我建议传递这个变量:current element。 这样您就不需要选择元素。
使用window.getComputedStyle并将值转换为十六进制值,代码为:
function function1(ele) { var background = window.getComputedStyle(ele).backgroundColor; var hexColor = rgb2hex(background); if (hexColor != "#ff0077") { ele.style.backgroundColor = "#ff0077"; } else { ele.style.backgroundColor = "#ff7700"; } } function rgb2hex(rgb) { rgb = rgb.match(/^rgba?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?/i); return (rgb && rgb.length === 4) ? "#" + ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : ''; }
#box { background-color: #ff7700; cursor: pointer; }
<div id="box" onClick="function1(this)"> Inner HTML</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.