How Does the "Display: Contents" Property Value Work

How does the display: contents property value work?

From the official CSSWG specification:

contents

The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element’s children as normal).

Note: As only the box tree is affected, any semantics based on the document tree, such as selector-matching, event handling, and property inheritance, are not affected. [...]

The bold part (emphasis mine) is the answer you are looking for.

Also note the phrase: "must be treated as if it had been replaced in the element tree by its contents". So the element isn't really removed, but to make it easier to explain, it's like the element is removed and replaced by its content.

---

PS: avoid the use of www.w3schools.com as an official reference for accurate definitions like this. They can be good for explaining things in general, but will often fail to give precise and accurate definitions.

I set the display property of an HTML element in CSS. But, if I check that value in javascript it shows blank

Instead of using

el.style.display

Use

getComputedStyle(el).display

more info

Display contents of array based on dynamic value

logArr=(firstLogs secondLogs thirdLogs fourthLogs)
firstLogs=(a b c d e)
secondLogs=(f g h i j)
thirdLogs=(k l m n o)
fourthLogs=(p q r s t)
echo 'Please enter a top-level directory for the logger...'

select logDir in ${logArr[*]}
do
  break
done

set $logDir[*]
echo ${!1}

Output

Please enter a top-level directory for the logger...
1) firstLogs
2) secondLogs
3) thirdLogs
4) fourthLogs
#? 2
f g h i j

Display the value of CSS property in HTML using JavaScript

▶ First, you need to add an HTML element that will show the progress:

<div id = "progress"></div>

▶ Then, you can use the following JavaScript code:

var
    /* The elements */
    bar = document.getElementsByClassName("bar")[0],
    barFill = document.getElementsByClassName("bar-fill")[0],
    progress = document.getElementById("progress"),

    /* The bar's total width */
    barWidth = window.getComputedStyle(bar, null).getPropertyValue("width"),

    /* How much of the bar is filled */
    barFillWidth = window.getComputedStyle(barFill, null).getPropertyValue("width"),

    /* Create the percentage */
    pct = 100 * (parseFloat(barFillWidth) / parseFloat(barWidth)) + "%";

/* Set the innerHTML of our progress element */
progress.innerHTML = pct;

Check out this fiddle or the following snippet for a visual representation.

Snippet:

(function() {

  var

    bar = getByClass("bar"),

    barFill = getByClass("bar-fill"),

    progress = document.getElementById("progress"),

    barWidth = getWidth(bar),

    barFillWidth = getWidth(barFill),

    pct = 100 * barFillWidth / barWidth + "%";

  progress.innerHTML = pct;

  

  function getWidth(element) {

    return parseFloat(window.getComputedStyle(element, null).getPropertyValue("width"));

  };

  

  function getByClass(className) {

    return document.getElementsByClassName(className)[0];

  }

})();

.container {

  display: inline-block;

  width: 300px;

}

.bar {

  width: 100%;

  background-color: #E3E3E3;

  border-radius: 10px;

}

.bar-fill {

  height: 15px;

  display: block;

  background: #0073CF;

  width: 60%;

  border-radius: 7.5px;

  -webkit-transition: width 0.8s ease;

  transition: width 0.8s ease;

}

#progress {

  position: relative;

  bottom: 3px;

  display: inline-block;

}

<div class="container">

  <div class="bar">

    <span class="bar-fill"></span>

  </div>

</div>

<div id="progress"></div>

Retrieve value property of div in the click event

A div does not have a value property. You could probably retrieve it with getAttribute but there is an easier solution. Change value={option.value} onClick={(e, value) => handleClick(e, value)} to onClick={(e) => handleClick(e, option.value)}

As a side not you should not make clickable divs for accessibility reasons. You should either use styled button or anchor tags. At the very least add the aria attribute role="button" to the div.

Display value in css not working as expected

hidden is not a valid value for display, you are after none. Also, your class name is incorrect, it should be .hidden

.hidden{
    display: none;
}

Also, there is another property called visibility that also hides content with visibility: hidden. The difference is display makes it appear as the element has been removed completely from the page, whereas visibility makes the content disappear, but the space the element occupies is still respected.

What is the meaning of `auto` value in a CSS property.

The value of said property is adjusted automatically according to the content or the context of the element.

For example, a block-level element with height: auto will grow taller as it contains more text. For another example, a block element with margin: 0 auto will have the left and right margins increased until it becomes centered along the y-axis of the viewport.

It really depends on the property you give the value to, different properties behave differently depending on the content and context.

How to get css display property value in js

I'd suggest toggling a class. I've adjust your code to show how you can do this simply.

function showHideBlock(id) 
{
  var e = document.getElementById(id);
  
  if (e.classList.contains("hidden")) {
    e.classList.remove("hidden");
  } else {
    e.classList.add("hidden");
  }
}

function showHideBlocks(id1, id2)
{
  showHideBlock(id1);
  showHideBlock(id2);
}

.hidden {
  display: none;
}

<p>This is a text
  <br />
  <a ref="##" onclick="showHideBlocks('i1', 'i2')">
    <span id="i1" class="show">(show more)</span>
  </a>
</p>
<p id="i2" class="hidden">This is hidden text
  <br />
  <a ref="##" onclick="showHideBlocks('i1', 'i2')">(hide me) 
  </a>
</p>

---

Related Topics