如果显示是块，则使用 javascript 将其更改为无答案

【问题标题】：if display is block change it to none with javascript如果显示是块，则使用 javascript 将其更改为无
【发布时间】：2018-10-06 09:55:33
【问题描述】：

此代码

#element { 
  display : block
}

<div id="element"></div>

我怎样才能写出类似的javascript代码

// button on click
if(element-display = block){
    // change it to display = none
}

【问题讨论】：

编写javascript来添加或删除类，如果有类text1，则可以有两个类添加类text2和删除text1，或者您可以使用javascript直接读取元素的style.color并将其修改为任何值。
document.getElementById("id-of-element").style.backgroundColor = "blue"
Change an element's class with JavaScript的可能重复
Change Background color of input field using JavaScript的可能重复
确定一个元素的颜色实际上比faizan 说的要难一些。 style.color 将提供元素的内联颜色属性，但不会注册通过 css 分配的 color。 window.getComputedStyle(<element>).color 将给出当前应用于元素的颜色字符串。

标签： javascript html css colors

【解决方案1】：

style.backgroundColor = "red"

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";
}

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

<div id="square"></div>
<button onclick="changeColor()">Change Color</button>

【讨论】：

【解决方案2】：

试试这个，

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

#element1{display:block}

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

【讨论】：

帮助很大我如何将它与多个
一起使用？如果我单击按钮显示第一个块并隐藏其他块。如果我点击两次显示第二次并隐藏其他人
@ArminEslami，我在这里创建了示例脚本：jsfiddle.net/wok67eL4 检查它

【解决方案3】：

对要检索的元素使用 .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

【讨论】：

【解决方案4】：

你可以试试这个

$(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";
        }
    });
});

<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>

【讨论】：

【解决方案5】：

假设您有一种方法可以选择要检查的文本，并且所有文本都在一个元素中，您可以使用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>

【讨论】：