翼度科技»论坛 编程开发 JavaScript 查看内容

DOM元素之更改

3

主题

3

帖子

9

积分

新手上路

Rank: 1

积分
9
通常改变元素涉及三个内容

  • 动态改变元素中的内容
  • 动态改变元素的CSS属性值
  • 改变元素节点的属性
改变元素中的内容

改变元素中的内容可以使用两个相关属性 innerHTML 和 innerText
innerHTML 属性可以按照HTML语法设置内容,并且浏览器可以正常按照HTML语法渲染
innerText 属性只能以纯文本的形式设置节点中的内容
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>innerHTML</title>
  7. </head>
  8. <body>
  9.    
  10.    
  11.    
  12. </body>
  13. </html>
复制代码
改变元素节点CSS样式

前面说过,DOM是JS用来操作HTML和CSS的工具。节点对象上有一个style属性可以动态修改css样式
语法
  1. // box 代表一个dom节点
  2. // style 后面跟着具体要操作的css属性,只是在这里要使用驼峰的形式编写
  3. box.style.backgrouColor = 'green';
  4. box.style.fontSize= '32px;'
复制代码
举例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>改变元素节点CSS样式</title>
  7.    
  8. </head>
  9. <body>
  10.    
  11.         box
  12.    
  13.    
  14.    
  15. </body>
  16. </html>
复制代码
改变元素节点的属性

标准的W3C规定的标签属性,元素节点对象就可以使用属性的方式直接设置
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>更改标准元素属性</title>
  7. </head>
  8. <body>
  9.     <input type="text" value="" id="textInput"/>
  10.    
  11. </body>
  12. </html>
复制代码
其实,还有一个方法,无论是标准的W3C属性还是自定义的非标准属性,我们都可以使用一个叫 setAttribute 设置
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.    
  10.    
  11. </body>
  12. </html>
复制代码
自定义属性不能直接观测到,我们可以打开控制台查看

   
微信公众号
  

来源:https://www.cnblogs.com/haloujava/p/17964989
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具