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

【问题标题】：Can't change html attribute with external script无法使用外部脚本更改 html 属性
【发布时间】：2013-10-07 16:26:45
【问题描述】：

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

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

【问题讨论】：

试试document.getElementById("test").className = test。
原生js属性方法：setAttribute、getAttribute & removeAttribute
与问题文本所说的相反，代码使用attr()（未定义），而不是setAttribute()。当这部分被修复时，代码就可以工作了。无论可能发生什么，都没有可用于追查原因的信息。当您遇到可证明的问题时，请删除此问题并发布新问题。

标签： javascript html setattribute

【解决方案1】：

更改所有类

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

添加类：

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

【讨论】：

所以更改后 document.getElementById("test").setAttribute("class", test);对于 document.getElementById("test").className = test;应该发生什么？因为没有任何改变。为了确保我们都在同一个页面上：在编写脚本并将其保存到 js/script.js 之后，我需要做的就是打开 index.html，关闭源代码中的弹出窗口和类名（文档上的 rmb - > 显示源）应该不同？如果这是计划 - 仍然没有。
您需要在要连接的值前面添加一个空格：.className += " "+test;
或者只是将测试变量设置为已经包含空格，var test = 'myClass';
@Speedy 我相信我的建议是一种更具可扩展性和可维护性的方法

【解决方案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;
}

【讨论】：

【解决方案3】：

你说你在做什么：

我正在尝试学习如何使用 setAttribute(name, value) 什么也没发生。

你实际上在做什么：

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

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

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

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

【讨论】：

是的，我知道 - 错误的代码示例。无论如何 attr(something, something) 或 setAttribute(name, value) 没有区别 - 它们都不起作用。 Acctualy - 我尝试了你们发布的每个代码示例，但没有任何效果。所以我的电脑真的很奇怪，或者我只是在吸 JS。

【解决方案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/

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

【讨论】：

是的，我知道 - 我不小心粘贴了我尝试过的许多版本的代码之一。他们都没有工作。不，您显示的代码也不起作用-我粘贴了它，没有更改也没有效果。我真的很困惑。
@user2855304 - 您的页面还有其他问题，因为我的代码在这里运行良好：jsfiddle.net/jfriend00/x25Lj
@user2855304 - 您应该检查浏览器的错误控制台。您可能在加载外部脚本时遇到问题，或者其中的错误导致 javascript 执行停止。
是的，我必须检查它，但问题显示在三个不同的浏览器上。无论如何 - 谢谢你的帮助。
@user2855304 - 问题可能出在您的 HTML 页面中，因此它当然会发生在多个浏览器中。检查浏览器中的错误控制台，它可能会向您显示网页中的问题。这是您在 javascript 开发中必须学习的第一件事。始终检查错误。