setAttribute与style.property：关于初识HTML DOM属性设定的一点思考

喜欢ヅ旅行 2022-05-18 06:13 26阅读 0赞

对于HTML DOM 来说，我一直用setAttribute来设定属性值，后来很多问题通过

document.getElementsByTagName("id").setAttribute("type","button");

来设定，很多情况都没有成功。

问了问前端的相关人员，他们说是通过CSS样式设定来解决。

document.getElementById("id").style.property="值"

可以运行一下下面的代码，进行测试：

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
    body {background-color:yellow; color:black;}
    </style>
    </head>
    <body>
    
    <p>点击按钮显示文档的 style 属性。</p>
    <p id="demo" style="background-color:red;">123</p>
    <button onclick="myFunction()">尝试一下</button>
    <script>
    function myFunction(){
    	document.getElementById("demo").style.height = "100px";
    	var attr = document.getElementById("demo").style.height;
    };
    </script>
    
    </body>
    </html>

可以直接去[https://c.runoob.com/front-end/61][https_c.runoob.com_front-end_61]在线编辑平台运行测试一下。

像这种的DOM，无法通过setAttribute来设定，只有通过CSS样式修改才能成功。前端人员说这是规定。。。我感觉他也不懂。。

但是在css属性中，我看到对于设定属性的时候，取出来的ID元素是作为一个对象来进行添加属性或者修改属性的。

下面的网址是整理的所有DOM Style属性列表：

[http://www.runoob.com/jsref/dom-obj-style.html][http_www.runoob.com_jsref_dom-obj-style.html]

[https_c.runoob.com_front-end_61]: https://c.runoob.com/front-end/61
[http_www.runoob.com_jsref_dom-obj-style.html]: http://www.runoob.com/jsref/dom-obj-style.html

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关初识HTML

不为失败找理由，只为成功找方法。所有的不甘，都是因为还心存梦想，在你放弃之前，好好拼一把，只怕心老，不怕路长。文章目录一、三个疑问1.HTML是什么？2.为什么要学习H...

爱被打了一巴掌/ 2024年05月05日 06:45/ 0 赞/ 8 阅读

相关关于算法的一点思考。。。

关于算法的一点思考。。。在实践过程中，我发现：有时候要解决一个问题，可以设计几个算法分步完成任务，这样处理起来比较简单，但是情况并非总是如此，有时，我们需要将几个步骤放在同

忘是亡心i/ 2022年09月23日 12:57/ 0 赞/ 173 阅读

相关 HTML初识

文章目录 HTML HTML简单介绍 HTML的文本元素 HTML HTML简单介绍 <!DOCTYP

蔚落/ 2022年09月04日 04:56/ 0 赞/ 154 阅读

相关关于HTTP解析的一点思考

[原文][Link 1] 似乎已经很久没有提到关于服务器的消息了，其实我一直都在写，只是有时事情比较多，会耽搁一点时间。在使用C重写前，我就已经用Dlang实现了近2个版

淩亂°似流年/ 2022年06月14日 05:20/ 0 赞/ 294 阅读

相关初识JavaScript DOM

JavaScript DOM D代表“Document”，文档，它将网页文档转换为文档对象。由“文档”引入“对象” O代表“Object” ，对象，即一种自

客官°小女子只卖身不卖艺/ 2022年06月05日 07:17/ 0 赞/ 116 阅读

相关初识HTML

实例运用<body>属性，渲染页面效果新建一个HTML5文件，为<body>标签添加样式，代码如下： 01 <!doctype html> 02 <html>

系统管理员/ 2022年06月02日 07:36/ 0 赞/ 168 阅读

相关 setAttribute与style.property：关于初识HTML DOM属性设定的一点思考

对于HTML DOM 来说，我一直用setAttribute来设定属性值，后来很多问题通过 document.getElementsByTagName("id").s

喜欢ヅ旅行/ 2022年05月18日 06:13/ 0 赞/ 27 阅读

相关关于缓存行填充的一点思考

关于缓存行填充的一点思考 Java6的处理方式 Java7的处理方式

本是古典何须时尚/ 2022年04月14日 03:41/ 0 赞/ 213 阅读

相关关于ContextClassLoader的一点思考

关于java的ClassLoader类加载器的资料，百度上一堆一堆的，其中[ 一看你就懂，超详细java中的ClassLoader详解][_java_ClassLoader

淩亂°似流年/ 2022年02月23日 12:15/ 0 赞/ 314 阅读

相关 DOM自定义属性 getAttribute、setAttribute、removeAttribute

1、函数语法 elementNode.attributes：属性返回包含被选节点属性的 NamedNodeMap。 elementNode.getAttribute(nam

缺乏、安全感/ 2021年09月20日 05:36/ 0 赞/ 234 阅读