0

我的 JavaScript 有点问题。我正在尝试学习如何使用 更改页面上的属性setAttribute(name, value)，但没有任何反应。

这是我的测试站点的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>Test</title>
</head>

<body>
<div id="test" class="time"></div>
<script src="js/script.js"></script>
</body>
</html>

这是我的 JavaScript 代码：

if(document.getElementById("test").hasAttribute("class")) {
    alert("got message");
    var test = "test";
    document.getElementById("test").setAttribute("class", test);
}

这很简单，所以它应该可以工作，但只会弹出一个警报，当我检查页面来源时，没有任何变化。老实说 - 我尝试了几种不同的方法，但没有任何效果。它一定是真的，真的很愚蠢，但我找不到它。

4

4 回答 4

1

更改所有课程

document.getElementById("test").className = test;

添加类：

document.getElementById("test").className += test;
于 2013-10-07T16:30:23.367 回答
0

当我开始使用 JS 并且不喜欢使用 JQuery 时，这就是我帮助我的方式。

    function hasClass(element,class){
    if(element==null){
        return false;
    }
    ret = false;
    var classes = element.className.split(" ");
    for(var i=0;i<classes.length;i++){
        if(classes[i]==class){ret = true;}
    }
    return ret;
}
function removeClass(element,class){
    if(hasClass(element,class)){
        if(element.className==class){
            element.className = "";
        }else{
            var classes = element.className.split(" ");
            element.className = "";
            var unset = false;
            for(var i=0;i<classes.length;i++){
                if(classes[i]!=class){
                    if(unset && element.className==""){
                        element.className = classes[i];
                        unset = true;
                    }
                    element.className+=" "+classes[i];
                }
            }
        }
    }
}
function addClass(element,class){
    if(!hasClass(element,class)){
        if(element.className!=""){
            element.className += " "+class;
        }else{
            element.className = class;
        }
    }
}
function getElementsByClassName(tag,class){
    var ret = new Array();
    var elements = document.getElementsByTagName(tag);
    for(var i = 0;i<elements.length;i++){
        var element = elements[i];
        var classes = element.className.split(" ");
        for(var k = 0; k<classes.length;k++){
            if(classes[k]==class){ret[(ret.length)]=elements[i];}
        }
    }
    return ret;
}
于 2013-10-07T16:33:09.690 回答
0

你说你在做什么：

我正在尝试学习如何使用 setAttribute(name, value)更改页面上的属性，但没有任何反应。

你实际上在做什么：

if(document.getElementById("test").hasAttribute("class"))
{
    alert("got message");
    var test = "test";

document.getElementById("test") .attr("class", test);

}

您需要更改.attr(..)为.setAttribute(..)

另外，请注意 setAttribute 将覆盖而不是连接您指定的属性的值。

于 2013-10-07T16:33:53.617 回答
0

您可以只使用.classNameDOM 对象的属性来访问类属性。

你可以用这个替换你的代码：

// if the class name is not empty, then change it
if (document.getElementById("test").className) {
    alert("got message");
    document.getElementById("test").className = "test";
}

工作演示：http: //jsfiddle.net/jfriend00/x25Lj/

PS DOM 对象上没有.attr()方法。您可能已经看到与 jQuery 对象一起使用，而您在此处没有。

于 2013-10-07T16:34:24.493 回答