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

文本1

//首先获取标签对象

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);

输出结果：文本1

//操作值的功能

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

console.log(ptag);

输出结果：文本1标签

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

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

ptag.className = "p1";

console.log(ptag.className);

输出结果：p1

html中.inner样式,JavaScript-DOM动态控制Html标签对象样式和innerHTML、className属性相关推荐

js如何写html中的内容,javascript怎样获取某个标签的内容？
在我们平时的JS编程中,经常要获取标签的内容对其进行操作,有很多细节的东西容易被我们忽略,下面让我们来看一下JavaScript如何获取标签中的内容. HTML结构如下: Title 这有个第一个p ...
JavaScript文档对象模型document对象改变Html表单属性(4)
1.document对象改变Html表单属性更改Html元素内容时候可以用innerHtml属性进行修改,但是表单元素只能用value属性修改元素内容案例如下: <!DOCTYPE html ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
html方法标签不起作用,Angular中innerHTML标签的样式不起作用的原因解析
1.背景在最近angular的项目中,需要用到[innerHTML]标签来指定一个div的样式: //HTML部分 //TS部分 contents = ' 商品信息栏位商品信息介绍 '; 但是上面的 ...
Shadow DOM及自定义标签
参考链接:点我一.什么是Shadow DOM Shadow DOM,直接翻译的话就是影子 DOM,可以理解为潜藏在 DOM 结构中并且我们无法直接控制操纵的 DOM 结构.类似于下面这种结构 Sh ...
《版式设计——日本平面设计师参考手册》—第1章应用对象样式
本节书摘来自异步社区<版式设计--日本平面设计师参考手册>一书中的第1章应用对象样式,作者+Designing编辑部,更多章节内容可以访问云栖社区"异步社区"公众号查看 ...
JavaScript DOM操作表格及样式
一操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...
前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
html中的bom和dom,Javascript基础五（BOM和DOM）
1.BOM概念什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型.这个对象就是window BOM提供了独立于内容而与浏览器窗口进行交互的对象 BOM由一系列 ...

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

html中.inner样式,JavaScript-DOM动态控制Html标签对象样式和innerHTML、className属性相关推荐

最新文章

热门文章