Fatal编程技术网
  • javascript/
  • Javascript：比较Javascript设置的背景颜色

Javascript：比较Javascript设置的背景颜色

javascript css

Javascript：比较Javascript设置的背景颜色,javascript,css,background,comparison,Javascript,Css,Background,Comparison,如何比较元素的背景色，当使用javascript设置颜色时，我需要一个切换背景色的函数： function toggleBgColor() { if(document.getElementById("id").style.backgroundColor === "blue"){ document.getElementById("ide").style.backgroundColor = "red"); }else{ document.getElem

如何比较元素的背景色，当使用javascript设置颜色时，我需要一个切换背景色的函数：

function toggleBgColor() {
    if(document.getElementById("id").style.backgroundColor === "blue"){
        document.getElementById("ide").style.backgroundColor = "red");
    }else{
        document.getElementById("ide").style.backgroundColor = "blue");
    }
}
问题是，比较总是错误的，因此我的背景总是蓝色的，但它希望在调用函数时颜色从蓝色切换到红色，反之亦然。

使用
Window.getComputedStyle（）
-.

使用
Window.getComputedStyle（）
-。

backgroundColor属性可能会因颜色的各种表示而变得棘手。考虑换类：

JavaScript

function toggleBgColor() {
    var el = document.getElementById("id");
    var hasBlue = el.classList.contains('blue');
    el.classList.toggle('blue', !hasBlue);
    el.classList.toggle('red', hasBlue);
}

function toggleBgColor() {
    document.getElementById("id").classList.toggle('selected');
}
CSS

.blue {
  background-color: blue;
}
.red {
  background-color:red;
}

#id {
    background-color:red;
}
#id.selected {
    background-color:blue;
}
或者在语义上更加正确：

JavaScript

function toggleBgColor() {
    var el = document.getElementById("id");
    var hasBlue = el.classList.contains('blue');
    el.classList.toggle('blue', !hasBlue);
    el.classList.toggle('red', hasBlue);
}

function toggleBgColor() {
    document.getElementById("id").classList.toggle('selected');
}
CSS

.blue {
  background-color: blue;
}
.red {
  background-color:red;
}

#id {
    background-color:red;
}
#id.selected {
    background-color:blue;
}
backgroundColor属性可能会因颜色的各种表示而变得棘手。考虑换类：

JavaScript

function toggleBgColor() {
    var el = document.getElementById("id");
    var hasBlue = el.classList.contains('blue');
    el.classList.toggle('blue', !hasBlue);
    el.classList.toggle('red', hasBlue);
}

function toggleBgColor() {
    document.getElementById("id").classList.toggle('selected');
}
CSS

.blue {
  background-color: blue;
}
.red {
  background-color:red;
}

#id {
    background-color:red;
}
#id.selected {
    background-color:blue;
}
或者在语义上更加正确：

JavaScript

function toggleBgColor() {
    var el = document.getElementById("id");
    var hasBlue = el.classList.contains('blue');
    el.classList.toggle('blue', !hasBlue);
    el.classList.toggle('red', hasBlue);
}

function toggleBgColor() {
    document.getElementById("id").classList.toggle('selected');
}
CSS

.blue {
  background-color: blue;
}
.red {
  background-color:red;
}

#id {
    background-color:red;
}
#id.selected {
    background-color:blue;
}
为什么不简单地添加一个可以切换的类呢

function toggleBgClass() {
    var element = document.getElementById('id');

    if (element.classList.contains('blue')) {
        element.classList.add('blue');
        element.classList.remove('red');
    }
    else {
        element.classList.add('red');
        element.classList.remove('blue');
    }
}
现在，在CSS中：

.blue {
    background-color: blue;
}

.red {
    background-color: red;
}
为什么不简单地添加一个可以切换的类呢

function toggleBgClass() {
    var element = document.getElementById('id');

    if (element.classList.contains('blue')) {
        element.classList.add('blue');
        element.classList.remove('red');
    }
    else {
        element.classList.add('red');
        element.classList.remove('blue');
    }
}
现在，在CSS中：

.blue {
    background-color: blue;
}

.red {
    background-color: red;
}
您编写的代码不正确。 正确的代码是

    function toggleBgColor()
    {
       if(document.getElementById("ptag").style.backgroundColor === "blue")
       {
         document.getElementById("ptag").style.backgroundColor = "red";
       }
       else
       {   
         document.getElementById("ptag").style.backgroundColor = "blue";
       }
    };
Html文件

<html>
    <head>
        <script type="text/javascript" src="js/backgroundtry.js"></script>
    </head>
    <body>
        <p id="ptag" style="background-color:blue;">
            Hi How are you
        </p>
        <a class="mybutton" onclick="toggleBgColor();">
            Change Color
        </a>
    </body>
</html>




你好


变色
您编写的代码不正确。 正确的代码是

    function toggleBgColor()
    {
       if(document.getElementById("ptag").style.backgroundColor === "blue")
       {
         document.getElementById("ptag").style.backgroundColor = "red";
       }
       else
       {   
         document.getElementById("ptag").style.backgroundColor = "blue";
       }
    };
Html文件

<html>
    <head>
        <script type="text/javascript" src="js/backgroundtry.js"></script>
    </head>
    <body>
        <p id="ptag" style="background-color:blue;">
            Hi How are you
        </p>
        <a class="mybutton" onclick="toggleBgColor();">
            Change Color
        </a>
    </body>
</html>




你好


变色
您必须使用内联css才能开始工作。您必须使用内联css才能开始工作。这是jQuery，对吗？我现在不想使用jQuery，因为我认为如果你只能在框架中使用它，你就不会真正了解一种编程语言。这里是jQuery的click函数和ready，用javascript onclick函数替换，用onload替换，剩下的保持不变，你试试看，当我做
console.log（item.style.backgroundColor）时
我得到了
未定义的
？它完全按照您需要的方式工作。让我知道您面临的错误。只需复制粘贴我的代码并告诉我是否存在问题这是jQuery，对吗？我现在不想使用jQuery，因为我认为如果你只能在框架中使用它，你就不会真正了解一种编程语言。这里是jQuery的click函数和ready，用javascript onclick函数替换，用onload替换，剩下的保持不变，你试试看，当我做
console.log（item.style.backgroundColor）时我得到了
未定义的
？它完全按照您需要的方式工作。请告诉我您面临的错误。只需复制粘贴我的代码并告诉我是否有问题