how to change label Title css into Javascript-CodePudding

my css are

label[title="Hot"]{
  display:none;
}
label[title="Cold"]{
  display:none;
}

could you help me how can i change this into JavaScript

CodePudding user response：

var hot_label = dcoument.querySelector('label[title="hot"]');
var cold_label = dcoument.querySelector('label[title="Cold"]');
//If you want to hide.
hot_label.style.display = "none";
cold_label.style.display = "none";

CodePudding user response：

dcoument.querySelectorAll('[title="hot"]').forEach(label => {
    label.style.display = "none"
})

CodePudding user response：

It sounds like you're asking how to do the same thing in JavaScript. If so, you would need to create a DOM element of type 'label' and set it's properties the same way you would if you were to use .getElementById or .querySelector. Should look something like:

var hot_label = document.createElement('label');
hot_label.title="Hot";
hot_label.display="none";

var cold_label = document.createElement('label');
cold_label.title="Hot";
cold_label.display="none";

Then you'd need to put them somewhere. Let's say for example your html has <div id="tempLabels"></div>. You would first get the container, then append the new DOM elements.

var container = document.getElementById('tempLabels');
container.appendChild(hot_label);
container.appendChild(cold_label);

Alternatively you could have one label and change the title:

var temp_label = document.createElement('label');

// when temp is hot
temp_label.title="Hot";
temp_label.display="inline-block"; //or whatever display type you're using

// when temp is cold
temp_label.title="Cold";
temp_label.display="inline-block"; //or whatever display type you're using

// hide label
temp_label.display="none";