JavaScript-DOM动态控制Html标签对象样式和innerHTML、className属性

<p id="text1"><i>文本1<i></p>

//首先获取标签对象

var p = document.getElementById("text1");

//通过对象自带的style方法设置不同的样式

p.style.backgroundColor = "black";

p.style.fontSize = "20px";

//上面是给p标签设置两个样式,背景颜色和字体大小

说明:css样式中的属性带“-”的属性名,转换成驼峰格式使用




2.innerHTML属性,这个方法属于标签对象。用于获取html标签之间的html标签和文本内容,也可以用于操作标签内的值

//获取功能

var ptag = document.getElementById("text1").innerHTML;

console.log(ptag);

输出结果:<i>文本1</i>


//操作值的功能

var ptag = document.getElementById("text1").innerHTML+="标签";

console.log(ptag);

输出结果:<i>文本1</i>标签



3.className属性,用于获取html标签的class属性,也可以当作变量使用,给标签赋class属性值

//使用上面例子的p标签,省略getElement....

ptag.className = "p1";

console.log(ptag.className);

输出结果:p1

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,881评论 2 17
  • DOM DOM内容主要分为四部分: 什么是DOM和节点; 获取节点; 节点操作(3种); 属性操作(3种)。 什么...
    magic_pill阅读 795评论 0 1
  • 转载请著名出处 GitHub-TYRMars 文章Github地址 JavaScript基础知识剖析 01 01-...
    TYRMars阅读 586评论 0 7
  • 我恨过你,但我只有你;我恨过你,但我会过着你的人生。 看电影到底看些什么?对我来说看的总是情节,完全不去欣赏里面的...
    依way阅读 249评论 0 0
  • 日常餐桌上常吃的蔬菜,来自于植物的根茎叶花果实。比如土豆,西红柿,葱姜蒜等分别属于植物的茎,果实,叶根等。今...
    诗一闲修阅读 12,706评论 5 13