Display a DIV when it is found that it has a background color

Question

Display a DIV when it is found that it has a background color

Navigation

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

-2

I need to know how to display a DIV only if it has a BACKGROUND color selected, if it does not, it will be hidden. Because I have a color palette in CSS and when I select a color, the hidden DIV is visible.

My CSS:

.gerenciar-coluna-titulo{    
height:35px;
width:887px;      
float:left;
text-align:left;
line-height:55px;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
color: #666666;
border-bottom: 0px double #ffffff;
text-indent:25px;

}

javascript css ajax

asked by anonymous 13.01.2016 / 18:55

2 answers

How to use try catch to handle the error of the variable id in FindOrFail [closed] How to get the HTML code of a page protected with Cloudflare?

score 2 · Answer 1

If you use jQuery is an option, you can do it as follows:

var containerDiv = $('.container');

if (containerDiv.css('background-color') == 'rgb(255, 177, 0)') {
  $('.mostraDiv').show();
} else {
  $('.mostraDiv').hide();
}

.container{ 
    height:200px;
    width:300px;
    background-color: rgb(255, 177, 0);
}
.mostraDiv {
    height:150px;
    width:250px;
    background-color:royalblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><divclass="container">
    <div class="mostraDiv"></div>
</div>

Here's an example in jsFiddle: link . Change the color of background-color of class .container in the jsFiddle sample CSS, so you can see the code in action.

score 0 · Answer 2

CSS allows you to apply a style when a specific class exists so that you can display it. So:

body{margin:0;padding:0;}
section{
  width:100%;
  display:flex;
  justify-content:space-around;
  align-items:center;
}
div{
  width:100px;
  height:100px;
  line-height:100px;
  border:1px solid red;
  background:green;
  font-size:200%;
  text-align:center;
  display:none;
}

div.active{display:block}

<section>
  <div>foo</div>
  <div>bar</div>
  <div class="active">bin</div>
</section>

Now about the attribute of a div I believe it is not possible without the use of JS. See:

function show(name){
  
  $('section div[name='+name+']').toggleClass('active');
  
};

body {
  margin: 0;
  padding: 0;
}
section {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
div {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px solid red;
  background: green;
  font-size: 200%;
  text-align: center;
  display: none;
}
div.active {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><nav><buttononclick="show('foo')">foo</button>
  <button onclick="show('bar')">bar</button>
  <button onclick="show('bin')">bin</button>
</nav>
<section>
  <div name="foo">foo</div>
  <div name="bar">bar</div>
  <div name="bin">bin</div>
</section>