Question

代码

#element1{display=block}
<div id="element1"></div>

如何编写像

这样的javascript代码

otherbutton on click if(element1display=block){
    change it to display=none
}

Answer 1

＆＃13;

style.backgroundColor = "red"

＆＃13;

changeColor = function(){
  // Get the element by ID
  var div = document.getElementById("square");
  
  // Get the styles applied to that element
  var style = window.getComputedStyle(div)
  
  // Compare background color using rgb value
  if(style.backgroundColor == "rgb(0, 0, 255)")
    div.style.backgroundColor = "red";
}

＆＃13;

#square{
  width: 50px;
  height: 50px;
  background-color: blue;
}

＆＃13;

Answer 2

对要检索的元素使用.css（）方法。

var theColorIs = $('element').css("color"); //Which will return the color in RGB.

if(theColorIs  == 'blue') {
      $("element").css({"color": "red"}); 
}

https://www.w3schools.com/jquery/jquery_css.asp

Answer 3

你可以试试这个

＆＃13;

$(document).ready(function() {
    $('.btn').on('click', function() {
        var textElement = $('.txt').get(0);
        var currentColor = textElement.style.color;
    
        if (currentColor === "blue") {
            textElement.style.color = "red";
        } else {
            textElement.style.color = "blue";
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="txt" style="color:blue;">This is my text!</p>
<button class="btn">Change color</button>

＆＃13;

Answer 4

假设您有办法选择要检查的文本，并且所有文本都在一个元素中，您可以使用window.getComputedStyle来确定元素使用的color。然后，您可以使用if语句检查它是否是您要定位的颜色，然后为该元素分配不同的color。以下示例适用于Chrome;我不知道其他浏览器是否会完全返回rgb(0, 0, 255)，但是，一旦你检查了它们返回的内容，扩展if语句以接受这些字符串应该是相当简单的。

document.querySelector('button').addEventListener('click', ()=> {
  let p = document.querySelector('.blue-text');
  pStyle = window.getComputedStyle(p);
  console.log(pStyle.color)
  if (pStyle.color === "rgb(0, 0, 255)") {
    p.style.color = "red";
  }
})

.blue-text {
  color: blue;
}

<p class="blue-text">I'm some text</p>

<button>Change Text Color</button>

Answer 5

试试这个，

＆＃13;

document.querySelector("button").addEventListener("click", changeDiv);
function changeDiv(){
	var element = document.getElementById("element1");
    element.style.display = (element.style.display == 'none') ? 'block' : 'none';
}

＆＃13;

#element1{display:block}

＆＃13;

<div id="element1">Sample</div>
<button>Click here</button>

＆＃13;

if display = block使用javascript将其更改为none

5 个答案: