[javascript]javascript取得html元素,取得html样式,修改html样式
一.取得html元素
详情见:https://www.jb51.net/article/116460.htm
1.通过ID获取(getElementById)
document.getElementById('id')
2.通过name属性(getElementsByName)
document.getElementsByName('name')
3.通过标签名(getElementsByTagName)
document.getElementsByTagName('p')
4.通过类名(getElementsByClassName)
document.getElementsByClassName('class')
5.获取html的方法(document.documentElement)
document.documentElement是专门获取html这个标签的。
document.documentElement
浏览器控制台返回结果:

6.获取body的方法(document.body)
document.body是专门获取body这个标签的。
document.body
浏览器控制台返回结果:

7.通过选择器获取一个元素(querySelector)
document.querySelector('div .class')
8.通过选择器获取一组元素(querySelectorAll)
ocument.querySelectorAll('div .class')
二.取得html样式
取得元素的style即可:
document.getElementById('id').style
如:取得高度
document.getElementById('id').style.height
也可使用方法getBoundingClientRect(),取得更精确的信息:
document.getElementById('id').getBoundingClientRect().width
三.修改html样式
修改元素的style即可:
document.getElementById('id').style.height='10px'
[javascript]javascript取得html元素,取得html样式,修改html样式的更多相关文章
- 【温故而知新-Javascript】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
- JavaScript访问修改css样式表
1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" ...
- JavaScript 应用开发 #5:为完成的任务添加样式
判断一下任务的状态,如果是完成的任务,可以在任务项目的上面,添加一个额外的 css 类,在这个 css 类里,可以去定义完成的任务的样式.比如,把文字的颜色变成浅友色,并且在文字上面添加一条删除线.这 ...
- javascript改变style样式和css样式
转载 在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的 ...
- js | javascript改变style样式和css样式
转载 在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的 ...
- javascript 动态修改css样式方法汇总(四种方法)
在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...
- JavaScript通过ID获取元素坐标
JavaScript通过ID获取元素坐标 function getElementPos(elementId) { var ua = navigator.userAgent.toLowerCase ...
- JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...
- JavaScript移除数组元素减少长度的方法
JavaScript移除数组元素减少长度的方法,代码如下: //数组移除长度方法 var array=[]; array[0]="张三"; array[1]="李四& ...
随机推荐
- java面向对象(上)
一.一些重要的概念理解 Java是面向对象的程序设计语言,提供了类,成员变量,方法等的基本功能.类可被认为是一种自定义的数据类型,可以使用类来定义变量,所有使用类定义的变量都是引用变量.它会引用到类的 ...
- SaltStack配置管理-状态间关系
上一篇:SaltStack配置管理-LAMP状态设计 include包含 上篇安装LAMP环境是一个个环境安装,可以通过include模块全部安装 lamp.sls include: - apache ...
- javascript 知道这20个正则表达式,能让你少写1,000行代码
正则表达式,一个十分古老而又强大的文本处理工具,仅仅用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑.熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升. 正则表达式经常被用于 ...
- javascript关闭网页的几种方法
js关闭当前页面(窗口)的几种方式总结,需要的朋友可以参考一下: 1. 不带任何提示关闭窗口的js代码 <a href="javascript:window.opener=null;w ...
- HTTP 请求头中的 X-Forwarded-For(转)
原文:https://imququ.com/post/x-forwarded-for-header-in-http.html 我一直认为,对于从事 Web 前端开发的同学来说,HTTP 协议以及其他常 ...
- 省市县三级联动的SQL
完整版见https://jadyer.github.io/ 首先是建表语句 CREATE TABLE `t_address_province` ( `id` INT AUTO_INCREMENT PR ...
- python修改镜像源
pip升级:python -m pip install --upgrade pip https://www.cnblogs.com/andy9468/p/10319442.html 1.在命令中临时修 ...
- Shader工具
1. RenderMonkey 2. NVIDIA FX Composer 2.5
- A Basic Example of Threads Synchronization in Python, python中的线程同步示例
http://zulko.github.io/blog/2013/09/19/a-basic-example-of-threads-synchronization-in-python/ We will ...
- 数据挖掘-KNN-K最近邻算法
1. 算法核心思想: 通过计算每个训练样本到待分类样本的距离,选取和待分类样本的距离最近的 K 个训练样本,K个样本中那个类别的训练样本占据着多数, 则表明待分类的样本就属于哪一个类别. KNN算法在 ...