一.取得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样式的更多相关文章

  1. 【温故而知新-Javascript】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

  2. JavaScript访问修改css样式表

    1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" ...

  3. JavaScript 应用开发 #5:为完成的任务添加样式

    判断一下任务的状态,如果是完成的任务,可以在任务项目的上面,添加一个额外的 css 类,在这个 css 类里,可以去定义完成的任务的样式.比如,把文字的颜色变成浅友色,并且在文字上面添加一条删除线.这 ...

  4. javascript改变style样式和css样式

    转载 在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的 ...

  5. js | javascript改变style样式和css样式

    转载 在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的 ...

  6. javascript 动态修改css样式方法汇总(四种方法)

    在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...

  7. JavaScript通过ID获取元素坐标

    JavaScript通过ID获取元素坐标 function getElementPos(elementId) {    var ua = navigator.userAgent.toLowerCase ...

  8. JavaScript实现拖拽元素对齐到网格(每次移动固定距离)

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...

  9. JavaScript移除数组元素减少长度的方法

    JavaScript移除数组元素减少长度的方法,代码如下: //数组移除长度方法 var array=[];  array[0]="张三";  array[1]="李四& ...

随机推荐

  1. OneThink视图模型进行组合查询!文档组合文档详情

    测试方法:twoCate: public function twoCate(){ $where = array( 'category_id'=>43 ); $list = D('TwoView' ...

  2. Vue2.0 新手完全填坑攻略——从环境搭建到发布

    Jinkey原创感谢 showonne.yubang 技术指导Demo 地址:http://demo.jinkey.io/vue2源码:https://github.com/Jinkeycode/vu ...

  3. android.os.Handler

    android.os.handler A Handler allows you to send and process Message and Runnable objects associated ...

  4. SQL的子查询操作

    对于表中的每一个记录,我们有时候需要提取特殊的或者你需要的记录,要提前做一个表的筛选,之后再对你选出的记录做一个修改,此时你必须使用SQL的子查询操作.如:修改id=5的记录的strContent字段 ...

  5. mysql 数据操作 单表查询 concat_ws() 定义显示格式

    有个需求用concat以这种格式打印查询 mysql> select concat(name,':',age) from employee; +----------------------+ | ...

  6. mysql 数据操作 多表查询 子查询 介绍

    子查询就是: 把一条sql语句放在一个括号里,当做另外一条sql语句查询条件使用 拿到这个结果以后 当做下一个sql语句查询条件mysql 数据操作  子查询 #1:子查询是将一个查询语句嵌套在另一个 ...

  7. Hadoop集群完全分布式坏境搭建

    前言 上一篇我们讲解了Hadoop单节点的安装,并且已经通过VMware安装了一台CentOS 6.8的Linux系统,咱们本篇的目标就是要配置一个真正的完全分布式的Hadoop集群,闲言少叙,进入本 ...

  8. 第一个Shader程序

    fx文件: float4x4 matWorld; float Time=1.0f; struct VS_OUTPUT { float4 Pos :POSITION; float4 Color :COL ...

  9. WebStorm mac下如何安装WebStorm + 破解

    1.下载软件最好的地址就是官网了下载地址 选择好系统版本以后点击DOWNLOAD   下载Webstorm 2.安装双击下载好的安装包.将WebStromt拖入application文件夹,然后在La ...

  10. spring基础-01

    IOC : inversion of 缩写, DI:dependency injection 即在调用者中注入被调用者的实例. AOP 面向切面编程,是代理模式的体现.spring默认使用JDK的动态 ...