Cant get CSS property from child?

Question

I have this HTML code here :

 <div id="ctr" class="faden-slider-container">
    <div class="conteneur-image" ></div>
    <div class="conteneur-image" ></div>
    <div class="conteneur-image" ></div>
</div>

And I am trying to get the CSS property of the second div which class' name is conteneur-image but I get nothing :

app.controller("slideCtrl",function ($scope) {
    alert("hello")

    var tab = new Array();
    var elements = new Array();

    for(var i = 0; i<3 ; i++){
        elements[i] = document.getElementById("ctr").children[i]
    }

    var style = window.getComputedStyle(elements[1])
    var message = style.getPropertyCSSValue("background").cssText()

    alert("CSS Value is  : "+message)
})

Answer 1

Couple of issues there.

• getPropertyCSSValue is obsolete and may not work in browsers anymore

• id is a selector, not a valid css property

Use getPropertyValue instead,

var message = style.getPropertyCSSValue("background");

Demo

var style = window.getComputedStyle(document.getElementById("ctr").children[1])
var message = style.getPropertyValue("background");

console.log("CSS Value is  : " + message)

<div id="ctr" class="faden-slider-container">
  <div class="conteneur-image"></div>
  <div class="conteneur-image"></div>
  <div class="conteneur-image"></div>
</div>

Answer 2

Using jquery,you can get your 2nd HTML element this way:

var element = $("#ctr").children().eq(1);

Then if you want to make some transformation, like applying style:

element.css("background-color", "blue")

Here is a snippet:

var element = $("#ctr").children().eq(1);

    element.css("background-color", "blue")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ctr" class="faden-slider-container">
    <div class="conteneur-image" >one</div>
    <div class="conteneur-image" >second</div>
    <div class="conteneur-image" >third</div>
</div>