jquery globalcss IE不透明度
我正在使用jqueryglobalcss插件来更改全局样式表。它不处理不透明度和IE 我一直想让它在没有运气的情况下工作。下面是我试图强迫插件尝试理解IE风格的不透明度jquery globalcss IE不透明度,jquery,css,internet-explorer,jquery-plugins,opacity,Jquery,Css,Internet Explorer,Jquery Plugins,Opacity,我正在使用jqueryglobalcss插件来更改全局样式表。它不处理不透明度和IE 我一直想让它在没有运气的情况下工作。下面是我试图强迫插件尝试理解IE风格的不透明度 function changeCss (property, value, target) { if (property === "opacity") { $(target).globalcss("filter","alpha(opacity="+value*100+")"); /*
function changeCss (property, value, target) {
if (property === "opacity") {
$(target).globalcss("filter","alpha(opacity="+value*100+")");
/* For IE 8 (and 9, 10, 11?). Don't miss the added quotes */
$(target).globalcss("-MS-filter","\"progid:DXImageTransform.Microsoft.Alpha(Opacity="+value*100+")\"");
}
$(target).globalcss(property,value);
}
废话。如果有人能帮忙,那就太好了。谢谢
我在这里粘贴插件,因为它不再位于其原始站点上:
/*
* Global Stylesheet jQuery Plugin
* Version: 0.1
*
* Enables CSS modification that uses a 'global' stylesheet, rather than inline CSS.
*
* Copyright (c) 2009 Jeremy Shipman (http://www.burnbright.co.nz)
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* INSTRUCTIONS:
* use in the same way as the jQuery css function. Eg:
* $("some selector").globalcss("style","value");
*
* use the globalsetylesheet.print() function to return a string of the global stylesheet
*/
(function($) {
//global singleton class for
globalstylesheet = new function globalStylesheet(){
if(!document.styleSheets){
alert("document.Stylesheets not found");
return false;
}
var sheet = null;
var setrules = Array(); // rule cache
//set up a dummy noded
var cssNode = document.createElement('style');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.media = 'screen';
cssNode.title = 'globalStyleSheet';
document.getElementsByTagName("head")[0].appendChild(cssNode);
//find the newly created stylesheet and store reference
for(var i = 0; i < document.styleSheets.length; i++){
if(document.styleSheets[i].title == "globalStyleSheet"){
sheet = document.styleSheets[i];
}
}
//set a CSS rule
this.setRule = function setRule(selector,ruleText){
if(setrules[selector] != undefined){
return setrules[selector];
}else{
if(sheet.addRule){ // IE
sheet.addRule(selector,ruleText,0);
}else{
sheet.insertRule(selector+'{'+ruleText+'}',0);
}
setrules[selector] = this.getRule(selector);
}
return setrules[selector];
}
//get a saved CSS rule
this.getRule = function getRule(selector){
if(setrules[selector] != undefined){
return setrules[selector];
}else{
var rules = allRules();
for(var i = 0; i < rules.length; i++){
if(rules[i].selectorText == selector){
return rules[i];
}
}
}
return false;
}
//helper function to get all rules
function allRules(){
if(sheet.cssRules){ //IE
return sheet.cssRules;
}else{
return sheet.rules;
}
}
//print out the stylesheet
this.print = function print(){
var styleinfo = "";
var rules = allRules();
for(var i = 0; i < rules.length; i++){
styleinfo+= rules[i].cssText+"\n"
}
return styleinfo;
}
//use jQuery's css selector function to set the style object
this.css = function css(jquery,key,value){
rule = this.setRule(jquery.selector,key+":"+value+";");
jQuery(rule).css(key,value);
}
}
//hook new function into jQuery
jQuery.fn.extend({
globalcss : function globalcss(key,value){
globalstylesheet.css(this,key,value);
}
});
})(jQuery);
/*
*全局样式表jQuery插件
*版本:0.1
*
*启用使用“全局”样式表而不是内联CSS的CSS修改。
*
*版权所有(c)2009杰里米·希普曼(http://www.burnbright.co.nz)
*
*MIT和GPL许可下的双重许可:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*说明:
*使用方式与jQuery css函数相同。如:
*$(“某些选择器”).globalcss(“样式”、“值”);
*
*使用globalsetylesheet.print()函数返回全局样式表的字符串
*/
(函数($){
//全球单件类
globalstylesheet=新函数globalstylesheet(){
如果(!document.styleSheets){
警报(“未找到document.Stylesheets”);
返回false;
}
var表=空;
var setrules=Array();//规则缓存
//设置一个虚拟点点头
var cssNode=document.createElement('style');
cssNode.type='text/css';
cssNode.rel='样式表';
cssNode.media='screen';
cssNode.title='globalStyleSheet';
document.getElementsByTagName(“head”)[0].appendChild(cssNode);
//查找新创建的样式表和存储引用
for(var i=0;i
编辑:我创建了一个jsbin实时演示。请在不同的浏览器中进行比较。
更新: 我下面的第一个想法不是问题所在。事实证明,问题更为简单:确保在小于1的浮点数之前添加一个零。也许这是由于javascript如何处理字符串值到数字的转换?不管怎样,在“.5”之前添加一个零解决了这个问题
// works
var property = "opacity";
var value = "0.5";
var target = ".transparency";
// doesn't work
var property = "opacity";
var value = ".5";
var target = ".transparency";
请在此处查看工作代码:。顺便说一句,您最初的演示页面出现javascript问题,大括号放错了位置。我也修好了
下面是导致这种情况的原始想法——结果不是问题所在
您可能会遇到IE的一个怪癖,它与jquery无关:为了使不透明性工作,元素必须具有“”这是一种IE特定的布尔状态,由CSS触发,如高度、宽度、缩放等。如果元素没有“布局”,则不透明性将不起作用
解决方法是向元素添加特定的CSS,以便为其提供“布局”。不确定在您的案例中是否发生了这种情况,但通过添加一个提供CSS属性的布局并查看问题是否消失,就可以很容易地进行检查
发件人:
但只需设置过滤器/不透明度
IE中的价值是不够的。原来
IE需要一个元素
按过滤器/不透明度的顺序定位
工作。如果您的元素没有
您可以通过以下方式解决此问题的职位:
将“缩放:1”添加到CSS中。那里
还有其他黑客来处理这个问题,
zoom是我选的,看起来
工作得足够好
在JavaScript中,您可以发现
IE中的元素有一个位置组件
通过检查
element.currentStyle.hasLayout。如果
hasLayout为false,则该元素为
没有CSS定位
如果您想了解有关此问题的更多信息,请参阅以下阅读列表:
◦ 逐步探索OpacityStep[断开链接]
◦
◦
使用您的代码,这里有一种可能的方法来确保如何测试这是否是您的问题:
function changeCss (property, value, target) {
if (property === "opacity") {
$(target).globalcss("filter","alpha(opacity="+value*100+")");
/* For IE 8 (and 9, 10, 11?). Don't miss the added quotes */
$(target).globalcss("-MS-filter","\"progid:DXImageTransform.Microsoft.Alpha(Opacity="+value*100+")\"");
$(target).globalcss("zoom","1"); // ensure the target has layout
}
$(target).globalcss(property,value);
}
钼