0

我想知道如何通过类名获取元素，这是 html 代码

<div class="header" id="parent">

        <div class="child"></div>
            <div class="head_container">
                <img src="images/logo_picture.png" alt="" title="" class="logopic" />
                <img src="images/logo_text.png" alt="" title="" class="logotext" />
                <img src="images/head_line.jpg" title="" alt="" class="head_line" />

            </div>

    </div>

这是 jquery，这是问题，我有 getEelementById 的代码，但我想使用 getElementByClass。这是在任何元素上使用不透明度并防止子元素继承不透明度的方法。我将使用五六个时间类父，所以我需要getElementByClass方法

$(document).ready(function () {

function thatsNotYoChild(parentID) {

    var parent           = document.getElementById(parentID),
        children         = parent.innerHTML,
        wrappedChildren  = '<div id="children" class="children">' + children + '</div>',
        x, y, w, newParent, clonedChild, clonedChildOld;

    parent.innerHTML = wrappedChildren;
    clonedChild = document.getElementById('children').cloneNode(true);
    document.getElementById('children').id = 'children-old';
    clonedChildOld = document.getElementById('children-old');
    newParent = parent.parentNode;

    newParent.appendChild(clonedChild);
    clonedChildOld.style.opacity = '0';
    clonedChildOld.style.filter = 'alpha(opacity=0)';

    function doCoords () {
      x = clonedChildOld.getBoundingClientRect().left;
      y = clonedChildOld.getBoundingClientRect().top;
      if (clonedChildOld.getBoundingClientRect().width) {
        w = clonedChildOld.getBoundingClientRect().width; // for modern browsers
      } else {
        w = clonedChildOld.offsetWidth; // for oldIE
      }

      clonedChild.style.position = 'absolute';
      clonedChild.style.left = x + 'px';
      clonedChild.style.top = y + 'px';
      clonedChild.style.width = w + 'px';
    }

    window.onresize = function () {

      doCoords();

    };

    doCoords();

}


thatsNotYoChild('parent');
});
4

4 回答 4

2

使用类选择器。jQuery 使用类似于 CSS 的选择器，所以：

$('.child')

将选择所有具有 . 类的元素child。

对于 ID，在 ID 前面加上以下#字符：

$('#parent')
于 2013-09-27T22:21:13.267 回答
0

这是一个演示如何选择类元素的实时示例：

Working jsFiddle example

HTML：

<div class="header" id="parent">
    <div class="child"></div>
    <div class="head_container">
        <img src="http://placehold.it/50x50" alt="" title="" class="logopic" />
        <img src="http://placehold.it/50x50" alt="" title="" class="logotext" />
        <img src="http://placehold.it/50x50" title="" alt="" class="head_line" />
    </div>
</div>
<input type="button" id="mybutt" value="Click Me">

javascript/jQuery:

//Gets any div when clicked
$('div').click(function(e) {
    alert('Class name is: ' + $(this).attr('class') );
    e.stopPropagation();
});

//Gets any div with class="child" when clicked
$('.child').click(function(){
    alert('You clicked the CHILD div');
});

//When click button, makes div with class="child" turn red
$('#mybutt').click(function(){
    $('.child').css({'background-color':'red'});
});
于 2013-09-27T22:37:32.120 回答
0

我想知道如何通过类名获取元素

只需使用getElementsByClassName

于 2013-09-27T22:20:17.383 回答
0

你为什么不简单地使用jquery？

$(".class").css({opacity:1});

解决您的问题：

你想做的事是不可能的。子级将始终继承父级的不透明度。这对我个人来说很有意义。

您可以做的是制作两个具有不同不透明度的背景图像，并使用 jquery 切换背景图像，而不是更改不透明度本身。

你明白吗？这是实现您想要的唯一方法。

$(".class").css({"background-image":"url('opacity-0.png')"});
$(".class").css({"background-image":"url('opacity-1.png')"});
于 2013-09-27T22:21:05.103 回答