Question

我想知道如何按类名获取元素，这是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');
});

Answer 1

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

$('.child')

将选择类为child的所有元素。

对于ID，请在ID前加上#字符：

$('#parent')

Answer 2

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

只需使用getElementsByClassName

即可

Answer 3

为什么不简单地使用jquery？

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

解决您的问题：

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

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

你知道吗？这是达到你想要的唯一方法。

$(".class").css({"background-image":"url('opacity-0.png')"});
$(".class").css({"background-image":"url('opacity-1.png')"});

Answer 4

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

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

按类名获取元素

4 个答案: