JS (javaScript)中获取CSS背景颜色的问题

发布网友发布时间：2022-04-26 19:11

共6个回答

热心网友时间：2022-04-20 22:22

<!DOCTYPE html>
<html>
<head>
<title>getHexColor js/jQuery 获得十六进制颜色</title>
<meta charset="utf-8" />
<script type="text/javascript">
function getHexBgColor(){
var str = [];
var rgb = document.getElementById('color').style.backgroundColor.split('(');
for(var k = 0; k < 3; k++){
str[k] = parseInt(rgb[1].split(',')[k]).toString(16);
}
str = '#'+str[0]+str[1]+str[2];
document.getElementById('color').innerHTML = str;
}
function getHexColor(){
var str = [];
var rgb = document.getElementById('color').style.color.split('(');
for(var k = 0; k < 3; k++){
str[k] = parseInt(rgb[1].split(',')[k]).toString(16);
}
str = '#'+str[0]+str[1]+str[2];
document.getElementById('color').innerHTML = str;
}
</script>
<style type="text/css">
#color{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div style="color: #88ee22; background-color: #ef8989;" id="color"></div>
<input onclick="getHexBgColor();" type="button" value="获得背景色" />
<input onclick="getHexColor();" type="button" value="获得字体颜色" />
</body>
</html>

点击“获得背景色”按钮，会调用getHexBgColor()方法获取css的背景色。

热心网友时间：2022-04-20 23:40

var ointli=document.getElementsByTagName('ul');

并且这个方法是在整个页面都没有加载完的时候获取的，你可以把js写在div的下面也可以用body的onload()方法

其实要做成这种效果用Jquery最好了，有时间可以去学习一下

热心网友时间：2022-04-21 01:15

热心网友时间：2022-04-21 03:06

<html>
<head></head>
<body>
    <div id="box3">
        <ul id="int">
    <li>第一行文字</li>
            <li>第二行文字</li>
            <li>第三行文字</li>
            <li>第四行文字</li>
            <li>第五行文字</li>
        </ul>
    </div>
    <script type="text/javascript">
        var oint=document.getElementById('box3');
        var ointli=oint.getElementsByTagName('li');
        for(i=0;i<ointli.length;i++)
        {
            bindMouse(ointli[i]);
        }
        function bindMouse(_this){
            _this.onmouseover=function(){
                _this.style.backgroundColor="red";
            }
            _this.onmouseout=function(){
                _this.style.backgroundColor = "";
            }
        }
    </script>
</body>
</html>

热心网友时间：2022-04-21 05:14

var ointli=document.getElementsByTagName('li');

for(i=0;i<ointli.length;i++)
{
ointli[i].onmouseover=function()
{
this.style.backgroundColor="red";
}
}
你试试追问大哥为啥用我的ointli[i] 就不行？你的this是正确的，理论上来说你的this指的就是ointli[i] 啊

追答应该是方法本身不能调用他自己的吧
var ointli=document.getElementsByTagName('li');这个ointli[i]和
ointli[i].onmouseover=function()
{
ointli[i].style.backgroundColor="red";//这个的ointli不是同一个方法中的，浏览器显示的是ointli[i]没有定义
}

热心网友时间：2022-04-21 07:39

ointli[0].style.backgroundColor=;颜色值没有，追问抱歉我的颜色值给了是yellow。ointli[0].style.backgroundColor=yellow;