Fatal编程技术网
  • javascript/
  • Javascript Can'；不能使用外部脚本更改html属性

Javascript Can'；不能使用外部脚本更改html属性

javascript html

Javascript Can'；不能使用外部脚本更改html属性,javascript,html,setattribute,Javascript,Html,Setattribute,我的JavaScript有点问题。我试图学习如何使用setAttribute（name，value）更改页面上的属性，但什么都没有发生 这是我的测试站点的HTML代码： <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Test</title> </head> <body> <div id="test" class="ti

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

更改所有类

document.getElementById("test").className = test;
添加类：

document.getElementById("test").className += test;
这就是我在开始使用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;
}

函数类（元素类）{
if（元素==null）{
返回false；
}
ret=假；
var classes=element.className.split（“”）；

对于（var i=0；i您所说的您正在做的事情：

我正在尝试学习如何使用
设置属性（名称、值）并且什么也不发生

你实际上在做什么：


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


document.getElementById（“test”）.attr（“class”，test）；

您需要将
.attr（..）
更改为
.setAttribute（..）


另外，请注意，setAttribute将显示指定属性的值。
您只需使用DOM对象的
.className
属性即可访问class属性

您可以将代码替换为以下内容：


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


工作演示：


另外，DOM对象上没有
.attr（）
方法。您可能已经看到了在jQuery对象中使用的方法，但这里没有。
请尝试
document.getElementById（“测试”）.className=test
.js属性方法：setAttribute、getAttribute和removeAttribute与问题文本所述相反，代码使用
attr（）
（未定义），而不是
setAttribute（）
。修复此部分后，代码会正常工作。无论发生什么情况，都没有任何信息可用于查找原因。请删除此部分，并在遇到可证明的问题时发布新问题。因此，在更改document.getElementById（“test”）.setAttribute（“class”，test）；对于document.getElementById（“test”）.className=test；应该会发生什么？因为没有任何变化。为了确保我们都在同一个页面上：在编写脚本并将其保存到js/script.js之后，我需要做的一切就是打开index.html，关闭弹出窗口和源代码中的类名（文档上的人民币->显示源代码）是否应该不同？如果这是计划-仍然没有。您需要在要连接的值前面添加一个空格：
.className+=“”+test；
或者只是将测试变量设置为已经包含空格，var test='myClass'；@Speedy我相信我的建议是一种更具可伸缩性和可维护性的方法。是的，我知道-我不小心粘贴了我尝试过的多个版本的代码中的一个。它们都不起作用。不，您显示的代码也不起作用-我粘贴了，没有更改没有效果。我真的很困惑。@user2855304-你的页面上还有其他问题，因为我的代码在这里工作得很好：@user2855304-你应该检查浏览器的错误控制台。你可能在加载外部脚本时遇到问题，或者其中有一个错误导致javascript停止执行。是的，我必须检查它，但问题仍然存在s在三种不同的浏览器上。无论如何-谢谢您的帮助。@user2855304-问题可能出现在HTML页面中，因此当然会发生在多个浏览器中。检查浏览器中的错误控制台，它可能会向您显示网页中的问题。这是您在javascript开发中必须学习的第一件事。总是检查错误。是的，我知道-错误的代码样本。不管怎样，attr（某物，某物）或setAttribute（名称，值）都没有区别-它们都不起作用。事实上，我尝试了你们发布的每一个代码样本，但没有任何效果。所以我的计算机中有些东西是真实的，真实的wierd，或者我只是吮吸JS。

}



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