JavaScript获取元素样式
原生的JavaScript获取写在标签内部的样式很简单：
<div class="test" id="test" style="width:100px;">test</div>
<script type="text/javascript">
window.onload=function(){
var oTest=document.getElementById("test");
alert(oTest.style.width); //100px }
</script>
对于外部样式 与 嵌入式样式，JavaScript通过style.width没有办法获取到宽度，解决办法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.test{ width:100px; height:100px; border:5px solid #ddd; padding:20px; font-family:Arial, Helvetica, sans-serif; font-size:24px;}
</style> <script type="text/javascript">
window.onload=function(){
var oTest=document.getElementById("test");
/*var styleInfo=window.getComputedStyle ?window.getComputedStyle(oTest,null):window.currentStyle;*/ function getStyle(ele,name){
var styleInfo;
if(window.getComputedStyle){ //非ie
styleInfo=window.getComputedStyle(ele,false)[name];
}else{ //ie opera
styleInfo=window.currentStyle[name];
}
return styleInfo;
}
alert(getStyle(oTest,"width")); }
</script>
</head> <body>
<div class="test" id="test" style="">test</div>
</body>
</html>
相关连接：
js获取样式、currentStyle和getComputedStyle的兼容写法
javascript获取元素CSS样式代码示例
js正确获取元素样式详解
js(1)取样式表中的样式
JavaScript获取元素样式的更多相关文章
- javascript 获取元素样式的方法
javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div s ...
- javascript获取元素样式值
使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...
- 重温JavaScript获取CSS样式的方法（兼容各浏览器）
众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...
- 函数return/获取元素样式/封装自己的库
一:函数return <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&qu ...
- 详细解析 JavaScript 获取元素的坐标
引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...
- Vue 获取元素样式 元素高度
看到这个问题我第一时间想的竟然是JS 不知道你是怎么想的 不过昨天有一个小哥哥 问我一个Vue的 哈哈哈 get了 我当时问他为什么不用JS获取 他说 这个性能更高 那我们来看看这个高性能的获取元素高 ...
- 原生js获取元素样式
摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...
- javascript获取元素的计算样式
使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...
- JavaScript获取元素CSS计算后的样式
原文链接https://www.w3ctech.com/topic/40 我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值 ...
随机推荐
- SpringMVC学习简单HelloWorld实例
首先还是从一个简单的Hello World项目说起: 我机器的开发环境为: Ubuntu12.04(不同操作系统对本系列项目没有影响): 开发工具:Eclipse For JavaEE: 数据库:My ...
- 安装XP和Ubuntu双系统问题——Ubuntu安装时无法识别原有系统
我主机本来安装了windows xp 和unbuntu15.04,由于在ubuntu下不小心卸载某依赖后,无法登入桌面,网上查了好多资料,原因各种,解决途径也各种,最终是还没有解决问题.各种更新,各种 ...
- 循序渐进Socket网络编程（多客户端、信息共享、文件传输）
循序渐进Socket网络编程(多客户端.信息共享.文件传输) 前言:在最近一个即将结束的项目中使用到了Socket编程,用于调用另一系统进行处理并返回数据.故把Socket的基础知识总结梳理一遍. 1 ...
- 读书笔记_Effective_C++_条款二十四： 若所有参数皆需类型转换，请为此采用non-member函数
class A { private: int a; public: A(int x) :a(x){} A operator*(const A& x) { return A(a*x.a); } ...
- jQuery链式操作
讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...
- 浅谈JS中的闭包
浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...
- Oracle 序列的应用
Oracle创建序列,删除序列,得到序列 序列的创建 create sequence seq_newsId increment by 1 start with 1 maxvalue 999999999 ...
- opencv 批量图像读写
处理图像数据集时通常要读写整个文件夹里的图像,这时就会用的图像的批量读写. 比较常用的方法就是生成一个包含所有图像的txt列表 生成txt文件的方法如下: 利用cmd进入dos 利用路径进入指定文件夹 ...
- iOS 的 APP 在系统中如何适配不同的屏幕的尺寸
iOS 的 APP 在系统中如何适配不同的屏幕的尺寸 标签: 2007年,初代iPhone发布,屏幕的宽高是 320 x 480 像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到iPhone ...
- Swift 总结使用问号（?）和感叹号（!）-备用
在使用可选类型和可选链时,多次使用了问号(?)和感叹号(!),但是它们的含义是不同的,下面我来详细说明一下. 1. 可选类型中的问号(?) 声明这个类型是可选类型,访问这种类型的变量或常量时要使用感叹 ...