如何获得元素的属性

源自：4-1 编程挑战

如何获得元素的属性

我用下面的方法为什么不能获得p3的属性color，height，width？？

function concel(){
         var p1=document.getElementById("p1");
         var p3=document.getElementById("p3");
         p1.style.color=p3.style.color.nodeValue;
         p1.style.width=p3.style.width.nodeValue;
         p1.style.height=p3.style.height.nodeValue;
         p1.style.display="block";
     }

提问者：慕粉1818511579 2016-12-13 22:00

个回答

KingdomLiu

2016-12-14 11:58:00

直接使用style属性无法访问到内嵌（写在head标签中的），外部（写在css文件中的）的css样式，只能访问内联样式（写在标签中的）的css样式
```
很用心在回答，满意的话给个采纳表示支持，感谢！
```
0
永晨

2016-12-14 00:56:45

可能有两个原因导致你不能正确取消设置属性的问题，导致你怀疑可能是没有获取到属性。
1. 你代码里面是否设置了唯一的id
2. 你获取到的属性已经被修改过，所以取消时再次赋值也取不到最初的值了。应该要保存最初属性。
  贴一下验证通过的代码，可以参考下：
3. var con=document.getElementById("con");
4. var txt=document.getElementById("txt");
5. var conColor=con.style.color;
6. var conHeight=con.style.height;
7. var conWidth=con.style.width;
8. var txtIsShow=con.style.display;
10. function changeColor(){
11. con.style.color="pink";
12. }
14. //定义"改变宽高"的函数
15. function changeWH(){
16. con.style.height="500";
17. con.style.width="300";
19. }
21. //定义"隐藏内容"的函数
22. function hideTxt(){
23. txt.style.display="none";
24. }
26. //定义"显示内容"的函数
27. function showTxt(){
28. txt.style.display="block";
29. }
31. //定义"取消设置"的函数
32. function cancel(){
33. con.style.color=conColor;
34. con.style.height=conHeight;
35. con.style.width=conWidth;
36. txt.style.display=txtIsShow;
37. }
0