Question

<div style="float: right; margin-top: 15px; " class=" class1">

    <div style="min-width: 50px; min-height: 29px; opacity: 0.5; " class=" sub1_class">
        <div style="height: 29px; background-image: none; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: initial initial; background-repeat: initial initial; " class=" sub2_class">

            <div style="height: 39px; overflow-x: hidden; overflow-y: hidden; zoom: 1; cursor: pointer; background-image: url('images/new'); margin-top: 1px; background-position: 0px 0px; background-repeat: no-repeat no-repeat; " class=" sub3_class" unselectable="on">
            </div>
        </div>
    </div>
</div>

我想访问子元素并更改其上述dom结构的css。我该怎么做。我正在学习jquery。我已将class1类分配给变量。 myclass=document.getElementsByClassName('class1')[0];

我需要更改类名sub2_class和sub3_class的CSS。我该怎么办？

Answer 1

如果您使用的是jQuery，则不需要使用getElementsByClassName，请使用jQuery的选择器。

$( '.class1 .sub2_class' ).css( 'background-color', 'red' );

（顺便说一句，考虑使用类而不是内联CSS的样式元素。）

Answer 2

以下代码会这样做，

$("div.class1").find("div.sub1_class").addClass("new_css_class_name");
$("div.class1").find("div.sub2_class").addClass("new_css_class_name");

如果要删除现有的css类，也可以使用removeClass。

Answer 3

这是一个小例子：

<style>
my-class { color: red}
</style>

<div id="id-parent">
 <span id="id-child-1">hello</span> <span id="id-child-2">world</span>
</div>

<script>
$("#id-parent>*").addClass("my-class"); //you make hello world to red
</script>

访问jquery儿童元素

3 个答案: