|
|
通常改变元素涉及三个内容
- 动态改变元素中的内容
- 动态改变元素的CSS属性值
- 改变元素节点的属性
改变元素中的内容
改变元素中的内容可以使用两个相关属性 innerHTML 和 innerText
innerHTML 属性可以按照HTML语法设置内容，并且浏览器可以正常按照HTML语法渲染
innerText 属性只能以纯文本的形式设置节点中的内容- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>innerHTML</title>
- </head>
- <body>
-
-
-
- </body>
- </html>
前面说过，DOM是JS用来操作HTML和CSS的工具。节点对象上有一个style属性可以动态修改css样式
语法- // box 代表一个dom节点
- // style 后面跟着具体要操作的css属性，只是在这里要使用驼峰的形式编写
- box.style.backgrouColor = 'green';
- box.style.fontSize= '32px;'
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>改变元素节点CSS样式</title>
-
- </head>
- <body>
-
- box
-
-
-
- </body>
- </html>
标准的W3C规定的标签属性，元素节点对象就可以使用属性的方式直接设置- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>更改标准元素属性</title>
- </head>
- <body>
- <input type="text" value="" id="textInput"/>
-
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
-
-
- </body>
- </html>
微信公众号
来源:https://www.cnblogs.com/haloujava/p/17964989
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！ |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？立即注册
x
|
