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

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

这是我的测试网站的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); 
}

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

来源

2013-10-07 user2855304

尝试'document.getElementById（“test”）。className = test'。 –

Vanilla js属性方法：setAttribute，getAttribute＆removeAttribute – Speedy

与问题文本的说法相反，代码使用'attr（）'（未定义），而不是'setAttribute（）'。当这部分是固定的，代码工作。无论发生什么事情，都没有可用于追踪原因的信息。请删除此内容，并在发现问题时发布新问题。 –

更改所有类

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

添加类：

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

来源

2013-10-07 16:30:23 Speedy

所以在改变document.getElementById（“test”）。setAttribute（“class”，test）; for document.getElementById（“test”）。className = test;应该发生什么？因为没有什么变化。为了确保我们都在同一页面上：编写脚本并将其保存到js/script.js之后，我需要做的所有事情是打开index.html，关闭弹出窗口和类名（源文件 - >显示源）应该是不同的？如果这是计划 - 仍然没有。 – user2855304

您需要在要连接的值前添加一个空格：'.className + =“”+ test;' –

或者只是将测试变量设置为包含空格，var test ='myClass'; – Speedy

这是我如何帮助我，当我开始与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-07 16:33:09

你说你在做什么：

我想了解如何更改使用 的setAttribute（名称，值）后没有出现页面上的属性。

你实际上在做：

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

的document.getElementById（ “测试”）.attr（ “类”，测试）;

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

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

来源

2013-10-07 16:33:53

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

您可以使用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对象，而这些对象并不在这里。

来源

2013-10-07 16:34:24 jfriend00

是啊，我知道 - 我意外地粘贴了我试过的许多版本的代码之一。他们都没有工作。不，你显示的代码也不起作用 - 我粘贴它，没有变化，也没有效果。我真的很困惑。 – user2855304

@ user2855304 - 您的网页上还有其他内容，因为我的代码在此处运行良好：http://jsfiddle.net/jfriend00/x25Lj/ – jfriend00

@ user2855304 - 您应该检查浏览器的错误控制台。您可能在加载外部脚本时遇到问题，或者在其中导致JavaScript执行停止的错误。 – jfriend00

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

回答

相关问题