🗒️ 🌤️ 👨🏻‍🎨 cssHooks-多くのCSSプロパティを拡張 🍿 😕 🚚

この記事では、デフォルトでjQueryに含まれるjQuery.cssHooksオブジェクトについて説明します。このオブジェクトの拡張により、.css（）メソッドで規定されている新しいプロパティまたは値を追加できますが、これらは特定のブラウザでは最初はサポートされていません。多くの場合、CSSフックはニュースではありませんが、私にとってはちょっとした発見でした。
さらに読むのが面倒な人のために、私は主なアイデアを与えます。 jQueryにchuck-norris CSSプロパティを追加するとします。

$.cssHooks.chuckNorris = { get: function(elem) { //    elem,  value return value; }, set: function(elem, value) { //    elem,  value } } $(el).css('chuck-norris', Infinity); // $(el).css({'chuck-norris': Infinity}); alert($(el).css('chuck-norris')); //Infinity

以下は、IEの古いバージョンでrgbaをサポートするbackground-colorプロパティの「変更」と、仕様に存在しない新しいbackground-alphaプロパティを追加して、背景色の透明度を便利に設定する方法を詳細に説明します。 IEでは、フィルタープロパティを使用して色の透明度を実装し、2つの同じ色のグラデーションを要素に追加します。

この方法には2つの欠点があります。

まず、幅がautoのブロックではグラデーションが機能しないため、ハックを使用する必要があります。

 $('div').width('100%');

第二に、フィルターは背景画像に作用します。古いバージョンのロバで予想される（最初の写真）の代わりに、これ（2番目の写真）を取得します。

最初に、さまざまな形式で色を解析し、オブジェクト{r、g、b、a}を返す関数（parseColor）が必要です。次のオプションが考慮されます。

空の文字列またはトランスパテントが入力に到着したとき
#Aarrggbb形式文字列（IEのグラデーション用）
#Rrggbbフォーマット文字列
#Rgbフォーマット文字列
フォーマット文字列rgb [a]（r、g、b [、a]）

このパーサーのコード（サイズにより場所が異なります）、そして実際には、ここからアイデアは部分的に相互的です。

2番目のステップは、htmlノードを受け取り、将来必要となる多くの関数を含むColorクラスを作成することです。

 var Color = function(el){ //     : //   IE8-,      ,     var ieDetect = (function(){ var ua = navigator.userAgent; var result = {} result.isOldIe = ~ua.indexOf('MSIE 6') || ~ua.indexOf('MSIE 7') || ~ua.indexOf('MSIE 8'); result.hasGradient = result.isOldIe && ~el.style.filter.toLowerCase().indexOf('gradient'); result.isGradientEnabled = result.hasGradient && !!el.filters.item("DXImageTransform.Microsoft.gradient").enabled; return result; })(); //          var colorToHex = function (objColor) { var hex = {}; for (var i in objColor) { hex[i] = objColor[i]; if (i==='a') { hex.a = Math.round(hex.a*255); } hex[i] = hex[i].toString(16); // '0',        hex[i] = hex[i].length == 2 ? hex[i] : '0' + hex[i]; } return hex; } //  {r,g,b,a}      var colorToString = function(objColor, format) { var hexColor = colorToHex(objColor); switch(format) { case 'rgb': return 'rgb(' + objColor.r + ',' + objColor.g + ',' + objColor.b + ')'; case 'rgba': return 'rgba(' + objColor.r + ',' + objColor.g + ',' + objColor.b +',' + objColor.a + ')'; case '#6': return '#' + hexColor.r + hexColor.g + hexColor.b; case '#8': return '#' + hexColor.a + hexColor.r + hexColor.g + hexColor.b; } } //      var convertColor = function(color, format) { var colorObj = parseColor(color); return colorToString(colorObj, format) } //  getComputedStyle    //  ,  if (!window.getComputedStyle) { window.getComputedStyle = function(el, pseudo) { this.el = el; this.getPropertyValue = function(prop) { var re = /(\-([az]){1})/g; if (re.test(prop)) { prop = prop.replace(re, function () { return arguments[2].toUpperCase(); }); } return el.currentStyle[prop] ? el.currentStyle[prop] : null; } return this; } } ...

次に、色の値自体の設定に移りましょう。ネストされているにもかかわらず、読者がコードを理解するのにそれほど苦労しないことを願っています。

 this.setBackgroundColor = function(color) { var newColor, newColorObj = parseColor(color); if(ieDetect.isOldIe) { //  IE if(newColorObj.a < 1) { //     el.style.backgroundColor = 'transparent'; newColor = colorToString(newColorObj, '#8'); if(ieDetect.hasGradient) { //     el.filters.item("DXImageTransform.Microsoft.gradient").enabled = true; el.filters.item("DXImageTransform.Microsoft.gradient").startColorstr = newColor; el.filters.item("DXImageTransform.Microsoft.gradient").endColorstr = newColor; } else { //     el.style.filter += "progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=" + newColor + ", endColorstr=" + newColor + ")"; } } else { //     newColor = colorToString(newColorObj, '#6'); if(ieDetect.hasGradient) { //     el.filters.item("DXImageTransform.Microsoft.gradient").enabled = false; el.style.backgroundColor = newColor; } else { //     el.style.backgroundColor = newColor; } } } else { //   IE if(newColorObj.a < 1) { //     newColor = colorToString(newColorObj, 'rgba'); el.style.backgroundColor = newColor; } else { //     newColor = colorToString(newColorObj, '#6'); el.style.backgroundColor = newColor; } } }

コードの次の部分では、色の値を取得します。ここでは簡単です。

 this.getBackgroundColor = function() { var color; if(ieDetect.isGradientEnabled) { //  IE    color = el.filters.item("DXImageTransform.Microsoft.gradient").startColorstr; return convertColor(color, 'rgba'); } else { //  : http://snipplr.com/view/13523/getcomputedstyle-for-ie/ //      $(el).css('background-color'); //    ,     color = el.style.BackgroundColor || window.getComputedStyle(el,null).getPropertyValue('background-color'); return color; } }

ここからが主要部分です。 backgroundColorフックを追加します。

 $.cssHooks.backgroundColor = { get: function(elem) { var color = new Color(elem); return color.getBackgroundColor(); }, set: function( elem, value ) { var color = new Color(elem); color.setBackgroundColor(value); } }

backgroundAlphaフックを追加する

 $.cssHooks.backgroundAlpha = { get: function(elem) { var color = new Color(elem); var colorStr = color.getBackgroundColor(); var colorObj = parseColor(colorStr); return colorObj.a; }, set: function(elem, value) { var color = new Color(elem); var colorStr = color.getBackgroundColor(); var colorObj = parseColor(colorStr); //    ,  jQuery  'px';  colorObj.a = String(value).replace('px', ''); color.setBackgroundColor('rgba('+ colorObj.r+','+colorObj.g+','+colorObj.b+','+colorObj.a+')'); } }

すべてが完了し、使用できるようになりました。

 p{background-color: #991111; ...} div{background: url(...) ...}

 <div> <p>...</p> <p>...</p> </div>

 $('p').width('100%'); $('p:eq(0)').css({'background-color':'rgba(0,111,221,0.9)'}); $('p:eq(1)').css('background-alpha', 0.5);

ご覧のとおり、「キャメルケース」スタイルの名前を持つオブジェクトの場合、jQueryは「ハイフン」スタイルのサポートを自動的に追加します。

おわりに

特定のブラウザーでサポートされていない（または部分的にサポートされている）プロパティのサポートを追加する場合は、プラグインを作成してこれを行うことができ、代わりに$ .cssHooksを使用することを忘れてください。

参照：
最終バージョン： finom.ho.ua/bgalpha
記事からのフックコード： finom.ho.ua/bgalpha/background-rgba.csshook.jquery.js
代替ドキュメントのcssHooks ： jqapi.com/#p=jQuery.cssHooks

cssHooks-多くのCSSプロパティを拡張

おわりに

More articles: