Question

我在这里有这个HTML代码：

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

我正在尝试获取第二个div的CSS属性，该类的名称为conteneur-image，但我什么都没得到：

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

那里有几个问题。

getPropertyCSSValue已过时，可能无法在浏览器中使用
id是一个选择器，而不是有效的css属性

改为使用getPropertyValue，

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

<强>演示

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

使用jquery，您可以通过这种方式获取第二个HTML元素：

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

然后，如果你想进行一些转换，比如应用样式：

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

这是一个片段：

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>

不能从孩子那里得到CSS属性？

2 个答案: