[英]Can this solution be IE7 and IE6 compatible?
有沒有辦法使這個解決方案IE6和IE7兼容?
http://jsfiddle.net/kirkstrobeck/sDh7s/1/
我想我找到了一個真正的解決方案。 我把它變成了一個新功能:
jQuery.style(name, value, priority);
您可以使用.style('name')
獲取值,就像.css('name')
,使用.style()
獲取CSSStyleDeclaration,以及設置值 - 可以將優先級指定為'important' 。 請參閱https://developer.mozilla.org/en/DOM/CSSStyleDeclaration 。
var div = $('someDiv');
console.log(div.style('color'));
div.style('color', 'red');
console.log(div.style('color'));
div.style('color', 'blue', 'important');
console.log(div.style('color'));
console.log(div.style().getPropertyPriority('color'));
這是輸出:
null
red
blue
important
// For those who need them (< IE 9), add support for CSS functions
var isStyleFuncSupported = CSSStyleDeclaration.prototype.getPropertyValue != null;
if (!isStyleFuncSupported) {
CSSStyleDeclaration.prototype.getPropertyValue = function(a) {
return this.getAttribute(a);
};
CSSStyleDeclaration.prototype.setProperty = function(styleName, value, priority) {
this.setAttribute(styleName,value);
var priority = typeof priority != 'undefined' ? priority : '';
if (priority != '') {
// Add priority manually
var rule = new RegExp(RegExp.escape(styleName) + '\\s*:\\s*' + RegExp.escape(value) + '(\\s*;)?', 'gmi');
this.cssText = this.cssText.replace(rule, styleName + ': ' + value + ' !' + priority + ';');
}
}
CSSStyleDeclaration.prototype.removeProperty = function(a) {
return this.removeAttribute(a);
}
CSSStyleDeclaration.prototype.getPropertyPriority = function(styleName) {
var rule = new RegExp(RegExp.escape(styleName) + '\\s*:\\s*[^\\s]*\\s*!important(\\s*;)?', 'gmi');
return rule.test(this.cssText) ? 'important' : '';
}
}
// Escape regex chars with \
RegExp.escape = function(text) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}
// The style function
jQuery.fn.style = function(styleName, value, priority) {
// DOM node
var node = this.get(0);
// Ensure we have a DOM node
if (typeof node == 'undefined') {
return;
}
// CSSStyleDeclaration
var style = this.get(0).style;
// Getter/Setter
if (typeof styleName != 'undefined') {
if (typeof value != 'undefined') {
// Set style property
var priority = typeof priority != 'undefined' ? priority : '';
style.setProperty(styleName, value, priority);
} else {
// Get style property
return style.getPropertyValue(styleName);
}
} else {
// Get CSSStyleDeclaration
return style;
}
}
有關如何讀取和設置CSS值的示例,請參閱https://developer.mozilla.org/en/DOM/CSSStyleDeclaration 。 我的問題是我已經設置了!important
對我的CSS中的寬度!important
以避免與其他主題CSS發生沖突,但是我對jQuery中的寬度所做的任何更改都不會受到影響,因為它們會被添加到style屬性中。
要使用setProperty
函數進行優先級設置, http : //help.dottoro.com/ljdpsdnb.php表示支持IE 9+和所有其他瀏覽器。 我已經嘗試過使用IE 8但它失敗了,這就是為什么我在我的函數中建立了對它的支持(見上文)。 它將適用於使用setProperty的所有其他瀏覽器,但它需要我的自定義代碼才能在<IE 9中工作。
這看起來不必要復雜..我只是使用基於em的字體大小的容器內的標簽,並使用百分比調整容器的字體大小。 這樣,容器內的所有標簽都會自動調整大小。
JsFiddle: http : //jsfiddle.net/qqxe9/
CSS:
.container {
font-size:100%;
}
p {
font-size:1em;
}
JS
function changeFontSize(n)
{
var size = $('.container').data('size');
size += n * 10;
$('.container').css('font-size',size+'%').data('size',size);
}
$(document).ready(function(){
$('body').prepend(' \
<div class="font-size-changer"> \
<a href="#" class="decrease">A↓</a> \
<!--<a href="#" class="reset">A</a>--> \
<a href="#" class="increase">A↑</a> \
<a href="#" class="null">null</a> \
</div> \
').find('> .container').data('size',100);
$('.font-size-changer .increase').click(
function()
{
changeFontSize(1);
}
);
$('.font-size-changer .decrease').click(
function()
{
changeFontSize(-1);
}
);
});
我已將保存刪除到cookie部分,但這很容易重新應用..
一個技巧是在某處保存初始百分比(我使用data()),因為如果你試圖用.css('font-size')檢索它,它會給你計算的大小(例如'16px')。 可能有一種方法可以將值作為百分比獲得但不記得如何。
重新應用cookie保存部分時,請記住將初始data()設置為cookie中的值而不是100%,然后調用changeFontSize(0)來應用它。
無論如何,這段代碼適用於IE6。
您將無法在IE 6或7中實現此功能。 我建議改為創建新的樣式規則,其中可以包括!important
聲明,並且可以使用類似下面的函數在所有主流瀏覽器中實現。 它需要通過選擇器識別您的元素,例如ID選擇器(如果不存在則需要向元素添加ID),並且只創建樣式規則而不是檢索它們,盡管這對您的示例很好。
我已經更新了你的例子,它現在適用於所有主流瀏覽器,包括IE 6和7: http : //jsfiddle.net/9ZZVP/1/
樣式規則創建代碼:
var addRule;
if (typeof document.styleSheets != "undefined" && document.styleSheets) {
addRule = function(selector, rule) {
var styleSheets = document.styleSheets, styleSheet;
if (styleSheets && styleSheets.length) {
styleSheet = styleSheets[styleSheets.length - 1];
if (styleSheet.addRule) {
styleSheet.addRule(selector, rule)
} else if (typeof styleSheet.cssText == "string") {
styleSheet.cssText = selector + " {" + rule + "}";
} else if (styleSheet.insertRule && styleSheet.cssRules) {
styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length);
}
}
}
} else {
addRule = function(selector, rule, el, doc) {
el.appendChild(doc.createTextNode(selector + " {" + rule + "}"));
};
}
function createCssRule(selector, rule, doc) {
doc = doc || document;
var head = doc.getElementsByTagName("head")[0];
if (head && addRule) {
var styleEl = doc.createElement("style");
styleEl.type = "text/css";
styleEl.media = "screen";
head.appendChild(styleEl);
addRule(selector, rule, styleEl, doc);
styleEl = null;
}
}
用法示例:
createCssRule("#foo", "background-color: purple !important;");
請訪問http://www.javascriptlint.com/online_lint.php
將Javascript粘貼到那里。
你會看到有很多警告。 首先,修復所有警告。 一旦JavaScript Lint不再生成警告,請在IE中測試它。 這應該至少讓你開始尋找解決方案的道路。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.