用函数来设置样式时style的问题

<html>

<head>

<meta charset="UTF-8" />

<title> arguments</title>

</head>

<body>

<p id="test" style="background-color: red; color: blue;">我是一个段落！</p>

<script type="text/javascript">

// 在此处补充代码

function setDom(id,atr,val){

var ele=document.getElementById(id);

ele.style.atr=val;//ele.style[atr]=val;
}

}

setDom("test",backgroundColor,"orange")

</script>

</body>

</html>

一开始代码是这样的，设置不了,随后改成了注释里面的，OK了

那么问题来了，这个style在js中是一个引用类型的对象么？里面的属性和值都是键值对？

源自：JavaScript函数深入讲解 6-7 编程练习

收起

3回答

留白未来 2017-12-01 11:21:01

我的理解如下:

backgroundColor不加""又不是变量,怎么能传进去?
只能传"backgroundColor",那么 ele.style.atr=val; 就变成了: ele.style."backgroudColor"=orange;(但我不明白为什么控制台不报错)
ele.style[xxx]这种写法,[xxx]内是支持string的,有时我们做字符串拼接就得用[],所以就没问题了.

Miss路 2017-11-22 17:11:07

这里的style指的是<p id="test" style="background-color: red; color: blue;">我是一个段落！</p> 中的style，里面的格式就是键值对的，你还可以用style.color 的方式给里面的属性设置值。祝学习愉快。

提问者红星双子 #1

这里面的style是行内样式，是键值对的形式。那么外部样式呢？

2017-11-22 17:42:51
Miss路回复提问者红星双子 #2

外部样式就不能用style.color去写了，这是是dom操作，是针对标签中的内容的，和外部样式不掺和的，不要混淆了哦。

2017-11-22 18:30:06

小于飞飞 2017-11-22 10:36:48

代码问题如下：

该代码14行多了} 去掉传参是
setDom("test",backgroundColor,"orange")应该是setDom("test","backgroundColor","orange")，否则提示backgroundColor is not defined（backgroundColor未定义）
ele.style.atr 是说为样式名为atr设置样式，ele.style[atr]为样式名为atr存储的内容定义样式，及backgroundColor。
对象的两种引用方法: ' . '和[ ]