O blog descreve método getComputedStyle, então, temos que implementar uma versão simples de um pequeno plug-in, permite obter e definir propriedades CSS, sem o auxílio de jQuery.
Autor: Icarus
link original: as mãos com você para alcançar propriedade css js com o conjunto nativo e get
Vamos começar
Primeiro, crie um css-tool.jsarquivo, primeiro ele se parece com isso:
;(function (window,undefined) {
"use strict";
var cssTool = function () {
return new cssTool.prototype.init();
}
cssTool.prototype = {
init: function() {
console.log('init success');
return this;
},
}
cssTool.prototype.init.prototype = cssTool.prototype;
// 暴露接口
window.cssTool = cssTool;
})(window);escopo global pode ser visto como um prédio de apartamentos, criamos uma função anônima é executado imediatamente, o equivalente a um prédio de apartamentos no apartamento, fazemos as coisas na casa estão escondidos, ou seja, para o isolamento o papel do domínio, a conflitos evitar e variáveis externas. Coloque windowcomo um argumento para chegar à casa, o futuro não vai sair à procura de repetir windowo uso. Frente do ponto e vírgula, a fim de garantir um erro de sintaxe no arquivo e compressas. undefinedNão suportado em navegadores mais antigos, por isso, tendo em conta a compatibilidade adicionar um parâmetro.
Criamos um chamado cssToolmétodo privado, encontramos o equivalente a um pequeno quarto na casa para colocar gete setoutros métodos. Em seguida, adicione em um protótipo initmétodo para inicialização. Então nós modelamos jQuerya maneira, inito prototypeponto cssToolé prototype, por isso usamos initao criar instância como um construtor, você pode ter duas formas de chamar os plug-maneiras:
var ct = new cssTool()Construção decssToolcasoschamada direta
cssTool(), retornar a mesmacssToolinstância
método get
maneira comum
Navegadores modernos e IE9 +
window.getComputedStyle(elem,null).getPropertyValue(attr)IE678
elem.currentStyle.getAttribute(camelCase(attr))processamento compatível
conversão nomenclatura corcunda -camelCase
Para currentStyle, no navegador IE6, ele é muito sincera, assim como variáveis corcunda nomenclatura, e IE78 em um pouco rápido e solto, nomenclatura corcunda e da zona intermediária '-' são completamente e ser compatível e fácil de operar, nós convertemos nomenclatura unificada corcunda.
/**
* 驼峰命名法转换，IE678使用
* font-size --> fontSize
* @param {String} attr
* @param {String} match 匹配到的字符串，如-c
* @param {String} originText (\w)是一个捕获，这里是捕获到的字符，如c
* @return 返回驼峰命名方式的css属性名
*/
function camelCase (attr){
return attr.replace(/\-(\w)/g, function (match,originText) {
return originText.toUpperCase();
});
}Transparência get -getFilter
transparência IE678 é conseguido através da filter:alpha(opacity=0)definição, nós usar a correspondência de expressão regular para valores de transparência, neste momento, uma vez que o valor obtido neste momento é entre 0-100, é necessário em termos de nossa forma comum de 0-1.
/**
* IE678下获取透明度的值
* @param elem 获取值的 dom
* @return {Number} 透明度的值，默认为1
* IE678下设置透明度 filter: alpha(opacity=0) 取值为0-100
*/
function getFilter(elem) {
var _filter = elem.currentStyle.getAttribute('filter').match(/alpha\(opacity=(.*)\)/i);
var value = parseFloat(_filter[1]);
if(!isNaN(value)){
// 转化为0-1
return value ? value/100 : 0;
}
return 1;
}Obtém o valor do flutuador
O blog sugere, como floaté uma palavra reservada do ECMAScript. Assim, no navegador terá uma redacção substituto, como em navegadores modernos cssFloat, e está no IE678 styleFloat. Após o teste, usar diretamente nos navegadores modernos getPropertyValue("float")também pode obter o floatvalor. O IE678 não é, portanto, para float, requer um hack simples.
width | aquisição estilos de altura
Para uma ampla elementos não é estabelecido alto, o valor obtido directamente adquirido em IE678 é auto. O navegador moderno vai direto retornar seu valor px, nosso objetivo é ser devolvido valor px no IE.
// 直接获取外部样式表未设置的 width 和 height 返回值为 auto
// 为了获取精确的 px 值，使用 getBoundingClientRect 方法
// getBoundingClientRect 可以获得元素四个点相对于文档视图左上角
// 的 top、left、bottom、right值，进行简单计算即可
var condition = attr === 'width'
|| attr === 'height'
&& elem.currentStyle[attr] === 'auto';
if(condition){
var clientRect = elem.getBoundingClientRect();
return (attr === 'width' ?
clientRect.right - clientRect.left :
clientRect.bottom - clientRect.top
) + 'px';
}método set
Em comparação com os métodos método set para conseguir mais simples, porque nós temos cssTexteste cross browser IE6 + e artefatos modernos.
Por elem.style.cssTextpode escrever para o elemento de estilo, a operação é realmente no html tag styleatributo. Portanto, não pode ser diretamente atribuído ou perder todo o stylevalor da propriedade para cobrir fora. Usamos forma cumulativa para modificar as propriedades.
Além disso, há um pequeno pit navegador IE, se cssText não esvaziar, o valor de retorno do último ponto e vírgula é excluído, por isso precisamos adicionar um ponto e vírgula na frente da propriedade acumulada.
/**
* 设置元素css样式值
* @param elem 设置值的dom元素
* @param {String} attr 设置样式名称，如font-size
* @param {String} value 设置样式的值，如16px
*/
set: function (elem, attr, value){
// IE78 设置透明度需特殊处理
if(attr === 'opacity'){
// 针对 IE7 的 hack
// filter 滤镜要求 hasLFooout=true 才能执行
// IE浏览器且 hasLFooout=false 时执行
if(!!elem.currentStyle && !elem.currentStyle.hasLFooout){
elem.style.zoom = 1;
attr = 'filter';
value = 'alpha(opacity=' + value * 100 + ')';
}
}
// 通用方式
elem.style.cssText += ';' + (attr + ':' + value) + ';';
}suplemento
Explicação simples do efeito do novo operador
var Foo = function() {
return new Foo.prototype.init();
}
Foo.prototype = {
init: function() {
this.age = 18;
return this;
},
age: 20
}
console.log(Foo().age); // 18
console.log(Foo.prototype.age); // 20var Foo = function() {
return Foo.prototype.init();
}
Foo.prototype = {
init: function() {
this.age = 18;
return this;
},
age: 20
}
console.log(Foo().age); // 18
console.log(Foo.prototype.age); // 18Ao usar o novo operador, é colocado initcomo um construtor de chamada, em initcriará um implícito dentro do objeto e usado thisa ele, neste momento this.age=18representa um atributo idade adicionais sobre este objetos implícitos, a última return thisnão é necessária, o padrão construtor retornar this. Neste ponto, Foo.prototype.ageele não é afetado.
Quando não utilizando o novo operador, a chamada de função corresponde a um objecto normal, thispontos para inito objecto pertence, isto é Foo.prototype, this.age=18equivalente a Foo.prototype.ageatribuição, e o uso do novo operador é essencialmente diferente.
resumo
Aqui, o tutorial também vai chegar a um fim. A jQuery comum css()por trás método abrange um monte de conhecimento, com foco na compatibilidade cross-browser é o que nós discutimos isso, este é apenas para alcançar uma forma muito simples plugins operação css. Conhecimento ainda superficial, se não são claras ou no lugar errado, bem-vindo ao deixar uma questão mensagem ou menção para me ajudar a melhorar este widget.
Finalmente, o projeto completo Endereço: HTTPS: //github.com/xdlrt/css -...
buscando uma onda de estrela ~