Cant get CSS property from child?

Question

I have this HTML code here :

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)
})

user_1984039 · Answer

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)

user_5069957 · Answer

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")



    one
    second
    third

Cant get CSS property from child?

2 Answers