一.取得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. #cat ora11g_ora_.trc

    Trace file /u02/app/diag/rdbms/ora11g/ora11g/trace/ora11g_ora_31212.trc Oracle Database 11g Enterpri ...

  2. 用 Fiddler查看 Android 网络请求

    1. 下载安装 fiddler,尽量到官方网站找最新的版本 备注:安装后,打开的时候如果报错: Machine-wide Progress Telerik Fiddler installation h ...

  3. SQL Server的差异备份还原

    在SQL Server中还原差异备份,需要先还原在差异备份时间点之前的一个完整备份,在还原完整备份时要加上NORECOVERY参数,示例SQL语句如下: RESTORE DATABASE [数据库名称 ...

  4. 关于java web的笔记2018-01-12

    需求:1.写一个商品类,有商品编号.商品名称.商品分类.商品单价属性.2.写一个商品条目信息类,有商品和数量两个属性,有商品总价格方法.3.写一个购物车类,有添加商品方法.查看订单信息,删除商品,修改 ...

  5. 容斥原理解决某个区间[1,n]闭区间与m互质数数量问题

    首先贴出代码(闭区间[1,n]范围内和m互质的数) 代码: int solve(II n,II m){ vector<II>p; ;i*i<=m;i++){ ){ p.push_ba ...

  6. 怎么将Android的API demo导入到Eclipse工作区中

    File ->New Android Project 选择Create project from existing sample (不同Android版本有对应的ApiDemo示例).

  7. CF909F AND-permutations 构造

    正解:构造 解题报告: 传送门! QAQ我jio得还挺难的,,,构造+数论什么的果然还是不适合灵巧这种菜菜啊QAQ 不过理解了的话也就没有那么难?所以还是港下QAQ 首先看task1 首先要发现一个, ...

  8. Hive与ES整合

    https://www.elastic.co/guide/en/elasticsearch/hadoop/current/hive.html 注:添加的第三方jar必须位于namenode下,否则依然 ...

  9. OpenStack功能简介

    为什要用云? 一.简单的说就是对资源更加合理的分配,使用,比如硬件的数量,带宽等等这些,因为你不能机器买来不需要了再卖掉(当然也可以),带宽跟机房签合同得来一年的,中间不够了也不能加,超了也不退钱 二 ...

  10. STL学习笔记--各种容器的运用时机

    如何选择最佳的容器类别? 缺省情况下应该使用vector.vector的内部结构简单,并允许随机存取,所以数据的存取十分方便灵活,数据的处理也够快. 如果经常要在序列的头部和尾部安插和移除元素,应采用 ...