`
落花虽有意
  • 浏览: 185323 次
  • 性别: Icon_minigender_1
  • 来自: 长春
社区版块
存档分类
最新评论

JS 里元素结点的 style 属性

CSS 
阅读更多

DOM 里的元素结点都有一个 style 属性，用于控制元素结点的显示样式，与 CSS 里面的各属性有一一对应的关系
对应方式如：node.style.color 对应 CSS 里的 color
                node.style.fontSize 对应 CSS 里的 font-size
                即 首单词首字母小写，其他单词首字母大写的形式
style 属性是一个对象，可以用 typeof 来检验，该对象就封装了与 CSS 对应的属性

 

利用 node.style.* 方式来读取属性是有限制的，这种方式只能读取 页面元素里的内嵌 style 属性 或 JS 自己显示设置过的，而不能读取利用 <link> 方式从外部联接的 和 在 <head> 元素之间定义的 style，因为后两种方式的属性并没有被封装到 style 对象里面去，所以读取不到

 

另外，当用 JS 取元素结点的 class 属性时，应是利用 className 属性，而不是 class，至于为什么就不用多说了
当然对于一个 class 属性可以同时指定多个 className，只要用空格隔开就行了
如 <p class = "class1 class2 class3">asdf</p>

分享到：
| JS 里操作 DOM 的几个标准属性与方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS_style属性大全

    - **说明**: 此属性返回了一个指向框架窗口对象的引用，可以用来访问框架内的DOM元素或执行其他JavaScript操作。 **11. DATAFLD (dataFld)** - **功能**: 设置或获取由dataSrc属性指定的绑定到指定对象的给定数据...

    了解javascript中的Dom操作

    文档中的每一个部分都被视为一个结点，包括元素结点（如HTML标签）、文本结点（如元素中的文本内容）和属性结点（如元素的属性）。节点之间存在层次关系，例如父子关系、兄弟关系。 在JavaScript中，我们可以使用一...

    【JavaScript源代码】JS实现消灭星星案例.docx

    接下来，对`&lt;div&gt;`元素进行CSS样式设置，确保其具有合适的定位属性以便星星能够在其内部随机显示。 ```css /* CSS样式 */ div { position: relative; width: 1000px; height: 500px; margin: 100px auto; ...

    js代码-打印节点信息

    通常，这可能包括获取元素、遍历节点树、读取或修改节点属性，以及输出节点信息到控制台的函数。例如，`document.getElementById()`、`document.querySelector()`或`document.querySelectorAll()`方法可以用来选取...

    前端开发规范，需要的同学可自行下载

    3. **class与style**：不应为class或style属性设置空字符串，因为它们通常代表元素的样式，空值可能会导致预期之外的结果。 4. **布尔属性**：布尔类型的属性值为true时，可以直接写属性名，不需赋值，如`...

    WEB前端面试——常见CSS知识点

    5. 列表属性可继承：list-style-type、list-style-image、list-style-position、list-style 6. 生成内容属性可继承：quotes 7. 光标属性可继承：cursor 8. 页面样式属性可继承：page、page-break-inside、windows、...

    微信小程序 rich-text的使用方法

    2. **全局属性**: `class`和`style`是全局支持的属性，可以在结点上设置CSS类和样式。然而，`id`属性不被支持，以防止可能的安全问题。 3. **结点类型**: 结点类型有两种，`node`和`text`。`node`类型表示HTML标签...

    2021-2022计算机二级等级考试试题及答案No.11822.docx

    - **内联定义**：直接在HTML元素的`style`属性中定义样式。 ### 8. 排序算法类型 - **希尔排序**属于插入类排序法，它通过逐步减小增量序列的方式实现排序，因此正确答案是B。 ### 9. Word文档操作 - 要将另一...

    AmChart中文API

    amcharts 要一个“配置文件”（setting.xml），一个数据文件(amile_data.xml)， 一个 SWFObject.js，一个对应的 SWF 就可以生成漂亮的统计报表了 1 SWFObject v1.5的对象结构 view plaincopy to clipboardprint? ...

    2021-2022计算机二级等级考试试题及答案No.1327.docx

    - **知识点**：窗体的`BorderStyle`属性用于设置窗体的边框样式。 #### 题目22：Java 创建线程的方法 - **知识点**：在Java中创建线程有两种常见方法： - 继承`Thread`类并重写`run()`方法。 - 实现`Runnable`...

    2021-2022计算机二级等级考试试题及答案No.10355.docx

    为了在命令按钮上显示图形文件，需要设置按钮的`Style`属性为1（图形按钮），然后设置`Picture`属性为所需的图像。 ### 16. 数据库系统的核心：数据库管理系统(DBMS) 数据库系统的核心组件是数据库管理系统(DBMS)...

    前端笔试面试题目总结.docx编程资料

    #### DOM 结点属性与事件 - **公共属性**：`id`、`className`、`innerHTML`、`textContent`、`outerHTML` 等。 - **事件属性**：`onclick`、`onmouseover`、`onkeydown`、`onchange`、`onscroll` 等。 #### 盒模型...

    2021-2022计算机二级等级考试试题及答案No.13223.docx

    6. CSS含义：CSS代表层叠样式表（Cascading Style Sheets），用于控制网页元素的样式。正确答案：B。 7. 计算机发展阶段：计算机的发展阶段确实是以采用的不同物理器件为标志，如电子管、晶体管、集成电路和大规模...

    2021-2022计算机二级等级考试试题及答案No.10461.docx

    **知识点**: CSS 是层叠样式表(Cascading Style Sheets)的缩写，用于描述网页的表现形式，包括颜色、布局等。 ### 16. 结构化分析方法 **知识点**: 结构化分析方法是一种面向数据流的需求分析方法，采用自顶向下、...

Magicbox
Global site tag (gtag.js) - Google Analytics