通过类名获取元素答案

【问题标题】：get element by class name通过类名获取元素
【发布时间】：2013-09-28 18:14:35
【问题描述】：

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

【问题讨论】：

你有 jQuery 并且你正在使用 document.getElementById 等？使用 jQuery 怎么样？
api.jquery.com/class-selector
你有什么理由不使用像 $('.head_container') 或任何类这样的 jquery 吗？
没关系，但一切都变得不透明，甚至是子元素，我希望我的标题背景不透明而不是徽标，div 标题内的文本。

标签： jquery opacity

【解决方案1】：

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

$('.child')

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

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

$('#parent')

【讨论】：

【解决方案2】：

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

只需使用getElementsByClassName

【讨论】：

【解决方案3】：

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

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】：

你为什么不直接使用 jquery？

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

解决您的问题：

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

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

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

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

【讨论】：

就我而言，$(".header").css({opacity:1});所有 div 类头都得到不透明度、标志、文本和其他，你现在明白了吗？
@RagingBull 你想做的事是不可能的。子级将始终继承父级的不透明度。您可以做的是制作两个具有不同不透明度的背景图像，并使用 jquery 切换背景图像，而不是更改不透明度本身。你明白吗？这是实现您想要的唯一方法。