Directorio artículo
Un estilo CSS tres
DOM manipulación CSS anteriores estilos en línea , éste leen las hojas de estilo CSS (DOM escritura estilo interior y exterior de estilo denomina una hoja de estilo), tenga cuidado de no modificar la hoja de estilo
Dos, DOM lee la hoja de estilos CSS
2.1 atributos IE de la ayuda
propiedad currentStyle
- Sintaxis: nombre del elemento .currentStyle estilo
- Papel: Estilo Obtiene el elemento que se muestra actualmente
Por ejemplo:
alert(box1.currentStyle.width);
método 2.2 Soporte otros navegadores (IE8 y a continuación no son compatibles)
getComputedStyle método ()
- Parámetro 1: necesidad de obtener elementos de estilo
- Parámetro 2: pasar un pseudo-elemento, generalmente pasar null
- Devuelve el objeto que encapsula el elemento de estilo actual
Papel: método de la ventana se puede utilizar directamente, para obtener los elementos de estilo actuales
Por ejemplo:
alert(getComputedStyle(box1,null).width);
consejos: el llamado de apoyo y no son compatibles, no hay correspondientes propiedades y métodos del navegador
problemas de compatibilidad del navegador 2.3 a resolver
Enfoque: La combinación anterior de propiedades y métodos
Escribir una función integrada propiedades y métodos
/**
* 定义一个函数,用来获取指定元素的当前样式
* 参数:
* - obj 要获取样式的元素
* - name 要获取的样式名
*/
function getStyle(obj,name){
if(window.getComputedStyle){
//正常浏览器的方式
return getComputedStyle(obj,null)[name];
}else{
//IE8的方式
return obj.currentStyle[name];
}
}
Variable (getComputedStyle) y atributos (window.getComputedStyle) la diferencia entre :
- Variables: la necesidad de encontrar en su alcance, no hay ningún error encontrado
- Propiedades: Las devoluciones no se encuentran indefinidos
Ejemplo completo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<script type="text/javascript">
window.onload = function(){
//点击按钮以后读取box1的样式
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//调用下面函数
var w = getStyle(box1,"width");
alert(w);
}
}
/**
* 定义一个函数,用来获取指定元素的当前样式
* 参数:
* - obj 要获取样式的元素
* - name 要获取的样式名
*/
function getStyle(obj,name){
//没有加window是一个变量，需要在作用域寻找
//变量没有找到报错，属性没有找到返回undefined
if(window.getComputedStyle){
//正常浏览器的方式
return getComputedStyle(obj,null)[name];
}else{
//IE8的方式
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<br/><br/>
<div id="box1"></div>
</body>
</html>
Botón para conseguir el estilo box1
