一.取得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. swoole--PHP的异步、并行、高性能网络通信引擎

    swoole目前已被多家移动互联网.物联网.网络游戏.手机游戏企业使用,替代了C++.Java等复杂编程语言来实现网络服务器程序. 使用PHP+Swoole,开发效率可以大大提升.官方提供了基于swo ...

  2. 20144306《网络对抗》MAL_后门原理与实践

    本期收获 1.了解后门的基本概念. 2.Netcat.socat.MSF meterpreter的使用(MSF meterpreter实在太好玩了) 3.后门软件的启动方式: Windows任务计划程 ...

  3. D2 Magic Powder -1/- 2---cf#350D2(二分)

    题目链接:http://codeforces.com/contest/670/problem/D2 This problem is given in two versions that differ ...

  4. 第1章 1.8计算机网络概述--OSI参考模型和网络排错

    OSI参考模型的网络排错: 每一层都为上一层提供服务. 如果网络出故障了,应该从底层向高层一层一层的查. OSI参考模型排错指导:(排错原则:自下而上.终极大招ping命令) 1.物理层故障: ①查看 ...

  5. mysql 约束条件 not null与default

    not null与default 是否可空,null表示空,非字符串not null - 不可空null - 可空 use db4: 默认值,创建列时可以指定默认值,当插入数据时如果未主动设置,则自动 ...

  6. 002-原始jpa以及基本加载过程,基本sql使用

    一.概述 1.1.创建 public void createMethod() { EntityManagerFactory factory = Persistence.createEntityMana ...

  7. Openstack(四)Mysql主从

    4.1 安装mysql 4.1.1 安装依赖 # yum install vim gcc gcc-c++ wget autoconf  net-tools lrzsz iotop lsof iotop ...

  8. 常用linux shell脚本记录

    遍历目录下所有的文件是目录还是文件 for file in ./* do if test -f $file then echo $file 是文件 fi if test -d $file then e ...

  9. 使用Github发布自己的网站

    1.编写好自己的index.html 2.在github上新建一个分支,分支名需要按xxx.github.com(xxx为github账号名): 3.进入分支的setting界面,自动生成网页,会在分 ...

  10. 全新办公方式,iClap引领企业级服务新浪潮

    随着企业级服务,SaaS市场的飞速发展,国内市场上,伴随着“马云又一个反人类的社交梦-钉钉”的出现与强势推广,企业协同办公类的产品被不断的呈现在企业的视线中,一时间,似乎我们传统的工作方式好像已经成了 ...