Display a DIV when you see that it has a background color

Asked

Viewed 97 times

-2

I need to know how to display a DIV only if it has a BACKGROUND color selected, if it does not have it, it remains 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

  • Can you access https://jsfiddle.net/ and show us more succinctly what you really want to do? or edit the post and rephrase your question, how it is is difficult to understand what you really want to do.

2 answers

2

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

<div class="container">
    <div class="mostraDiv"></div>
</div>

Here’s an example in jsFiddle: https://jsfiddle.net/7jgxp4xs/.
Changes the color of background-color class .container in jsFiddle’s sample CSS, so you can see code in action.

0

CSS allows you to apply a style when a specific class exists, so it would be possible to 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 think 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>
  <button onclick="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>

Browser other questions tagged javascript css ajax

You are not signed in. Login or sign up in order to post.