-4

for this code

#element { 
  display : block
}

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

how can I write javascript code like

// button on click
if(element-display = block){
    // change it to display = none
}
Armin Eslami
  • 57
  • 1
  • 11
  • write javascript to add or remove class , you can have two classes if class text1 is there add class text2 and remove text1 or you can directly read and modify style.color of element to any value using javascript. – faizan Apr 25 '18 at 20:06
  • document.getElementById("id-of-element").style.backgroundColor = "blue" – Satish Kumar Apr 25 '18 at 20:06
  • 1
    Possible duplicate of [Change an element's class with JavaScript](https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript) – arirawr Apr 25 '18 at 20:09
  • Possible duplicate of [Change Background color of input field using JavaScript](https://stackoverflow.com/questions/26390759/change-background-color-of-input-field-using-javascript) – Sphinx Apr 25 '18 at 20:11
  • Determining an element's color is actually a little harder than faizan is stating. `style.color` will give an element's inline color attribute, but won't register `color` assigned through css. `window.getComputedStyle().color` will give the color string that is currently applied to the element. – wassona Apr 25 '18 at 20:17
  • Possible duplicate of [Can you check an object's CSS display with JavaScript?](https://stackoverflow.com/questions/4866229/can-you-check-an-objects-css-display-with-javascript) – hungrykoala Apr 26 '18 at 02:54

5 Answers5

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>
Luis felipe De jesus Munoz
  • 7,454
  • 2
  • 33
  • 53
1

try this,

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>
Anfath Hifans
  • 1,588
  • 1
  • 11
  • 20
  • help a lot how can I use this with multiple
    ? if I click button shows the first block and hide others. if I click twice show the second one and hide others
     – Armin Eslami Apr 25 '18 at 21:49
  • @ArminEslami, I have created sample script here : https://jsfiddle.net/wok67eL4/ check it – Anfath Hifans Apr 26 '18 at 05:56
0

Use the .css() method on the element you want to retrieve.

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

Jerfeson Guerreiro
  • 745
  • 1
  • 10
  • 19
0

You can try this

$(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>
TiTnOuK
  • 174
  • 1
  • 9
0

Assuming you have a way to select the text that you want to check, and that all the text is in one element, you can use window.getComputedStyle to determine what color the element is using. You can then use an if statement to check if it's the color you're targeting and then to assign the element a different color. The following example should work in Chrome; I don't know if other browsers would return rgb(0, 0, 255) exactly, but, once you've checked what they do return, expanding the if statements to accept those strings should be fairly trivial.

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>
wassona
  • 319
  • 1
  • 9