Question

我的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);
}

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

Answer 1

更改所有课程

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

添加课程：

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

Answer 2

当我开始使用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;
}

Answer 3

你说你做了什么：

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

您实际在做什么：

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

document.getElementById（＆＃34; test＆＃34;） .attr（＆＃34; class＆＃34;，test）;

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

此外，请注意setAttribute将overwrite instead of concatentate您指定的属性的值。

Answer 4

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

您可以使用以下代码替换代码：

// 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/

P.S。 DOM对象上没有.attr()方法。您可能已经看到了与jQuery对象一起使用的内容，这些对象在此处没有。

无法使用外部脚本更改html属性

4 个答案: