How to add a new style to an html element?

Question

How to add a new style to an html element?

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

0

Hello, I would like your help in a problem that I did not find the solution for. I have this code: (example)

.cifra.mono, .cifra.mono pre {
    font: 12pt 'Roboto Mono', monospace;
}
.c_config span {
    display: block;
}	
.c_config a {
    color: #F60;
}
a {
    text-decoration: none;
    outline: none;
}
.cifra b {
    color: #F60;
    font-weight: bold;
    font-family: 'Roboto Mono', 'Courier New', 'Courier', monospace;
}
strong, b {
    font-weight: bold;
}

<section class="cifra mono">
  <div class="c_config">
    <span>Tom: <a href="#">G</a></span>
    <span></span>
    <span></span>
  </div>
  <div itemprop="description">
<pre>     <b>G</b>          <b>D</b>
Parabéns pra você
               <b>G</b>
Nesta data querida
              <b>C</b>
Muitas felicidades
       <b>D</b>        <b>G</b>
Muitos anos de vida
    <b>G</b>
Muitos anos de vida
</pre></div></section>

And I'd like to know how I could add this style when I clicked a button:

b {
  display: none;
  }

In short, I'd like to know how to hide elements that are within <b></b> when you click a button.

javascript html css

asked by anonymous 30.05.2018 / 20:11

4 answers

How to set up a timer in Android Studio to run tasks at constant intervals? Error removing div with Jquery

score 2 · Answer 1

$(document).ready(function() {
  $("span:first").on("click", function() {
    $("b").css("display","none");
  })
})

.cifra.mono, .cifra.mono pre {
    font: 12pt 'Roboto Mono', monospace;
}
.c_config span {
    display: block;
}	
.c_config a {
    color: #F60;
}
a {
    text-decoration: none;
    outline: none;
}
.cifra b {
    color: #F60;
    font-weight: bold;
    font-family: 'Roboto Mono', 'Courier New', 'Courier', monospace;
}
strong, b {
    font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><sectionclass="cifra mono">
  <div class="c_config">
    <span>Tom: <a href="#">G</a></span>
    <span></span>
    <span></span>
  </div>
  <div itemprop="description">
<pre>     <b>G</b>          <b>D</b>
Parabéns pra você
               <b>G</b>
Nesta data querida
              <b>C</b>
Muitas felicidades
       <b>D</b>        <b>G</b>
Muitos anos de vida
    <b>G</b>
Muitos anos de vida
</pre></div></section>

score 0 · Answer 2

Friend adds an id attribute to your tag and gives it a name:

<b id"teste"></b>

After this you can change the style of your button with jquery:

$('#teste').on('click', () => {
  $(#teste).css('display', 'none');
});

I hope I have helped.

score 0 · Answer 3

You can use JavaScript for this. Just create a button that when clicked will call a function that selects all <b> within div and adds display: none :

function ocultaB(){
    var bs = document.querySelectorAll("div[itemprop='description'] b");
    for(var x=0; x<bs.length; x++) bs[x].style.display = "none";
}

.cifra.mono, .cifra.mono pre {
    font: 12pt 'Roboto Mono', monospace;
}
.c_config span {
    display: block;
}	
.c_config a {
    color: #F60;
}
a {
    text-decoration: none;
    outline: none;
}
.cifra b {
    color: #F60;
    font-weight: bold;
    font-family: 'Roboto Mono', 'Courier New', 'Courier', monospace;
}
strong, b {
    font-weight: bold;
}

<button onclick="ocultaB()">Clique para Esconder</button>
<section class="cifra mono">
  <div class="c_config">
    <span>Tom: <a href="#">G</a></span>
    <span></span>
    <span></span>
  </div>
  <div itemprop="description">
<pre>     <b>G</b>          <b>D</b>
Parabéns pra você
               <b>G</b>
Nesta data querida
              <b>C</b>
Muitas felicidades
       <b>D</b>        <b>G</b>
Muitos anos de vida
    <b>G</b>
Muitos anos de vida
</pre></div></section>

score 0 · Answer 4

To have an enable and disable effect

$(document).ready(function() {
  var toggle = true;
  $("span:first").on("click", function() {
    if(toggle == true){
       $("b").css("display","none");
       toggle = false;
    }else{
       $("b").css("display","inline");
       toggle = true;
    }
  })
})

.cifra.mono, .cifra.mono pre {
    font: 12pt 'Roboto Mono', monospace;
}
.c_config span {
    display: block;
}	
.c_config a {
    color: #F60;
}
a {
    text-decoration: none;
    outline: none;
}
.cifra b {
    color: #F60;
    font-weight: bold;
    font-family: 'Roboto Mono', 'Courier New', 'Courier', monospace;
}
strong, b {
    font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><sectionclass="cifra mono">
  <div class="c_config">
    <span>Tom: <a href="#">G</a></span>
    <span></span>
    <span></span>
  </div>
  <div itemprop="description">
<pre>     <b>G</b>          <b>D</b>
Parabéns pra você
               <b>G</b>
Nesta data querida
              <b>C</b>
Muitas felicidades
       <b>D</b>        <b>G</b>
Muitos anos de vida
    <b>G</b>
Muitos anos de vida
</pre></div></section>