为了账号安全,请及时绑定邮箱和手机立即绑定

为什么改成class就改变不了样式了呢,用的是getElementByClassName,求大神解释

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
  <script type="text/javascript">
    function message(){
        var bg=document.getElementById("bg");
        bg.style.backgroundColor="pink";
 }
 function message1(){
  var bg1 = document.getElementById("bg");
  bg1.removeAttribute('style');
 }
  </script>
</head>
<body>
请选择您的职业:<br>
  <form>
    姓名:<input id="bg" type="text" onfocus="message()" onBlur="message1()" />
  </form>
</body>
</html>

正在回答

2 回答

你好,这里的问题主要是两点。

  1. 方法名写错了,应该是:

var bg1=document.getElementsByClassName("bg")[0]

这样就可以正常取到页面中你想要的元素了。(getElement s ByClassName)掉了个s

2.是混淆了标签中Id 跟class两个属性的概念,id是当前页面中标签的唯一标识符,也就是id名是不能重复的,所以使用

documen.getElementById("ID")

只会取到一个标签,而class在当前页面是可以重复的,所以使用上述方法:

document.getElementsByClassName("bg")[0]

时,实际返回的是一个对象数组,拥有相同class属性值的所有元素都在里面,这时应该在后面加上 “[数字]”利用索引来访问数组元素。

以上!

2 回复 有任何疑惑可以回复我~

首先你要明确一点,

getElementByClassName

这个方法并不是返回指定的一个元素而是一类元素,即所有class为你设定的class名称的元素,所以它的返回结果应该是一个数组,那么你要改变样式就需要从数组中取到元素,再针对元素来设置属性,而不是直接数组设置属性,这样自然会无效

以下是方法解释;

getElementById() 方法返回带有指定 ID 的元素:【返回元素】

getElementsByTagName() 返回带有指定标签名的所有元素。【返回元素集合,即数组】

getElementsByClassName() 方法

如果您希望查找带有相同类名的所有 HTML 元素,请使用这个方法:【返回元素集合,即数组】


1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么改成class就改变不了样式了呢,用的是getElementByClassName,求大神解释

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信