<style>
*{
box-sizing: border-box;
}
html, body {
margin: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.main{
width: 600px;
height: 300px;
margin: 0 auto;
background: #999;
}
#p1{
padding: 10px 20px;
} </style>
<div class="main" id=main>
东方红 的事发后 沙发上好厉害多个从V型从一瓶酒发送到发送到
<p id=p1>sdfldsnfdsnldfsn fnsdfsdlknfsdflndslfsdn</p>
</div>
<script>
/**
* JS获取 dom样式的几种情况
* 一:获取元素的行内样式
* 二:获取计算后的样式
* 三:获取<link>和<style>标签写入的样式
* 四、获取元素的实际大小
1. clientWidth和clientHeight
这组属性可以获取元素可视区的大小,
可以得到元素内容及内边距所占据的空间大小。
返回了元素大小,但没有单位,默认单位是px,如果你强行设置了单位,
比如100em之类,它还是会返回px的大小。(CSS获取的话,是照着你设置的样式获取)。
对于元素的实际大小,clientWidth和clientHeight理解方式如下:
a. 增加边框,无变化;
b. 增加外边距,无变化;
c. 增加滚动条,最终值等于原本大小减去滚动条的大小;
d. 增加内边距,最终值等于原本大小加上内边距的大小;
##注意:当box-sizing属性值是border-box的时候上述abcd不成立
*
*/
//1 定义获取dom的函数
function getDom(str){
return document.querySelector(str);
}
//2 、定义获取
function getStyle(dom){
var style=null;
window.getComputedStyle?style=window.getComputedStyle(dom):style=dom.currentStyle;
return style;
}
var dom1=getDom('#main');
console.log(dom1.clientWidth);// 得到的是没带px的数字
var domstyle=getStyle(dom1);// 字符创的宽度带px 和上面的clientWidth实质上是一样的
console.log(domstyle.width); //p 的宽度
var dom2=getDom('#p1');
console.log(dom2.clientWidth);
console.log(getStyle(dom2).width);
</script>

JS获取元素属性的更多相关文章

  1. JS获取元素属性和自定义属性

    获取元素的属性分为两种类型: 1-获取元素常见的属性(class,id,type,value……) 2-获取自定义的元素的属性(data-value,data-mess…….) 获取元素的属性,设置元 ...

  2. js获取元素属性值为空的原因和解决办法

    问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...

  3. JS获取元素属性、样式getComputedStyle()和currentStyle方法兼容性问题

    1. getComputedStyle()  方法获取到的是经过计算机/浏览器计算后的样式 getComputedStyle($("#div")).width; 兼容性:IE6 7 ...

  4. JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

  5. js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...

  6. JS中获取元素属性的逆天大法

    给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...

  7. Js获取元素样式值(getComputedStyle&currentStyle)兼容性解决方案

    因为:style(document.getElementById(id).style.XXX)只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. 一般js获取内部样式和外部样式使用 ...

  8. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  9. JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

    今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom    想用jquery  必须先引入(顺序问题)        先css 再js:   ...

随机推荐

  1. Swift5 语言参考(七) 属性

    属性提供有关声明或类型的更多信息.Swift中有两种属性,即适用于声明的属性和适用于类型的属性. 您可以通过编写@符号后跟属性的名称以及属性接受的任何参数来指定属性: @attribute name ...

  2. 【Spark算子】:reduceByKey、groupByKey和combineByKey

    在spark中,reduceByKey.groupByKey和combineByKey这三种算子用的较多,结合使用过程中的体会简单总结: 我的代码实践:https://github.com/wwcom ...

  3. MySQL utilities介绍&出现 No module named utilities

    目录 安装 mysqlreplicate mysqlrplcheck mysqlrplshow mysqlrpladmin mysqlfailover mysqldbcompare 详细介绍 mysq ...

  4. flask_ Mongodb 的语法-排序

    MOngoDB的排序是挺有用的   ,跟MySQL有明显的区别 .. 它的原生语法的第一个参数为条件限定,第二个参数为排序字段 db.news.find({},{'_id':1})   #1是升序  ...

  5. java list集合运算

    list集合运算 import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.I ...

  6. 基于鸢尾花数据的PCA降维处理

  7. 原生JS实现AJAX、JSONP及DOM加载完成事件,并提供对应方法

    JS原生AJAX ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRequest 对象: ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

  8. POJ 2860

    #include<iostream> #define MAXN 20 using namespace std; int a_1[MAXN]; int a_2[MAXN]; int main ...

  9. python 生成器 迭代器

    阅读目录 一 递归和迭代 二 什么是迭代器协议 三 python中强大的for循环机制 四 为何要有for循环 五 生成器初探 六 生成器函数 七 生成器表达式和列表解析 八 生成器总结 一 递归和迭 ...

  10. vim常用命令总结(转)

    vim常用命令 -------------------------------------------------------------------------------------------- ...