Question

这是我的css课程：

.my-css-class-name
{
    display: block;
}

我的网页上有一个使用此类的元素。我想修改这个元素的“显示”属性我很乐意通过获取该元素的句柄然后修改我需要的内容来做到这一点，但是，我不知道元素的名称 - 它是随机生成的（它是第三方扩展）。

所以我想我必须得到“.my-css-class-name”的句柄并直接修改该属性。
我如何实现，跨浏览器（主要）解决方案？

编辑＃1：
我正在寻找与新浏览器的兼容性。

Answer 1

嗯，从理论上讲，这很容易。

document.getElementsByClassName("my-css-class-name")[0].style.display = "something";

如果您需要IE兼容性：

/*
    Developed by Robert Nyman, http://www.robertnyman.com
    Code/licensing: http://code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName = function (className, tag/* "a","div",... */, elm/*parent*/){
    if (document.getElementsByClassName) {
        getElementsByClassName = function (className, tag, elm) {
            elm = elm || document;
            var elements = elm.getElementsByClassName(className),
                nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
                returnElements = [],
                current;
            for(var i=0, il=elements.length; i<il; i+=1){
                current = elements[i];
                if(!nodeName || nodeName.test(current.nodeName)) {
                    returnElements.push(current);
                }
            }
            return returnElements;
        };
    }
    else if (document.evaluate) {
        getElementsByClassName = function (className, tag, elm) {
            tag = tag || "*";
            elm = elm || document;
            var classes = className.split(" "),
                classesToCheck = "",
                xhtmlNamespace = "http://www.w3.org/1999/xhtml",
                namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
                returnElements = [],
                elements,
                node;
            for(var j=0, jl=classes.length; j<jl; j+=1){
                classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
            }
            try {
                elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
            }
            catch (e) {
                elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
            }
            while ((node = elements.iterateNext())) {
                returnElements.push(node);
            }
            return returnElements;
        };
    }
    else {
        getElementsByClassName = function (className, tag, elm) {
            tag = tag || "*";
            elm = elm || document;
            var classes = className.split(" "),
                classesToCheck = [],
                elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
                current,
                returnElements = [],
                match;
            for(var k=0, kl=classes.length; k<kl; k+=1){
                classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
            }
            for(var l=0, ll=elements.length; l<ll; l+=1){
                current = elements[l];
                match = false;
                for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
                    match = classesToCheck[m].test(current.className);
                    if (!match) {
                        break;
                    }
                }
                if (match) {
                    returnElements.push(current);
                }
            }
            return returnElements;
        };
    }
    return getElementsByClassName(className, tag, elm);
};

getElementsByClassName("my-css-class-name")[0].style.display = "something";

Answer 2

在评论中回复后，如果Jquery正在生成该元素，则很可能已安装该库。您可以尝试通过Jquery选择它并更改require属性。

$(document).ready( function(){    
$('.my-class-name').css('display', 'block');
});

将'block'替换为您需要的任何设置。

如果包含Jquery，它应该在页面加载时执行您的要求。您也可以将其附加到其他活动。

$(document).ready(function(){
$('.my-class-name').click(classClicked);
})

function classClicked(){
$(this).css('display','block')
}

Answer 3

getElementByClassName是不可能的（在旧浏览器中），但有一些解决方法，包括迭代每个元素。请参阅此处以获取讨论Do we have getElementsByClassName in javascript?

Answer 4

一些较新的浏览器开箱即用支持document.getElementsByClassName。较旧的浏览器没有，你必须使用循环遍历页面元素的函数。

Answer 5

一个灵活的getElementsByClassName函数，支持不支持本机函数的浏览器版本，如你所建议的那样，可能就是你要找的东西。它至少会起作用。但是，对于您正在执行的操作，查看document.styleSheets属性可能很有用。使用此路由，您可以直接更改CSS规则，如果它在浏览器中一致地工作，那么这将是更好的路径。遗憾的是，此区域中的浏览器兼容性远非一致，如下所示：http://www.quirksmode.org/dom/w3c_css.html

如果您仍有兴趣，请查看以下问题：Changing a CSS rule-set from Javascript

javascript修改css类属性，同时只知道类的名称

5 个答案: