エレメントの計算されたスタイルを返し、そのエレメントを疑似クローン化するjQuery CSSプラグイン？
JQueryを使用して、最初に一致した要素の計算されたスタイルのオブジェクトを返す方法を探しています。次に、このオブジェクトをjQueryのcssメソッドの別の呼び出しに渡すことができます。
たとえば、 width を使用すると、次のようにして2つのdivの幅を同じにすることができます。
$('#div2').width($('#div1').width());
既存のスパンのようにテキスト入力をすることができたらいいですね：
$('#input1').css($('#span1').css());
引数なしの.css（）は、 。css（obj） に渡すことができるオブジェクトを返します。
（このためのjQueryプラグインは見つかりませんが、存在するはずです。存在しない場合は、以下でプラグインに変更し、使用するすべてのプロパティとともに投稿します。）
基本的に、特定の要素を疑似クローンしますが、別のタグを使用します。たとえば、非表示にして、同じように見える入力要素をその上に配置したいli要素があります。ユーザーがと入力すると、要素をインラインで編集しているように見えます。
また、編集のためのこの擬似クローンの問題に対する他のアプローチも受け入れています。何か提案はありますか？
私が現在持っているものは次のとおりです。唯一の問題は、可能なすべてのスタイルを取得することです。これはとてつもなく長いリストになる可能性があります。
jQuery.fn.css2 = jQuery.fn.css;
jQuery.fn.css = function() {
if (arguments.length) return jQuery.fn.css2.apply(this, arguments);
var attr = ['font-family','font-size','font-weight','font-style','color',
'text-transform','text-decoration','letter-spacing','Word-spacing',
'line-height','text-align','vertical-align','direction','background-color',
'background-image','background-repeat','background-position',
'background-attachment','opacity','width','height','top','right','bottom',
'left','margin-top','margin-right','margin-bottom','margin-left',
'padding-top','padding-right','padding-bottom','padding-left',
'border-top-width','border-right-width','border-bottom-width',
'border-left-width','border-top-color','border-right-color',
'border-bottom-color','border-left-color','border-top-style',
'border-right-style','border-bottom-style','border-left-style','position',
'display','visibility','z-index','overflow-x','overflow-y','white-space',
'clip','float','clear','cursor','list-style-image','list-style-position',
'list-style-type','marker-offset'];
var len = attr.length, obj = {};
for (var i = 0; i < len; i++)
obj[attr[i]] = jQuery.fn.css2.call(this, attr[i]);
return obj;
}
編集：私は今しばらくの間上記のコードを使用しています。うまく機能し、元のcssメソッドとまったく同じように動作しますが、1つの例外があります。引数が0個渡された場合、計算されたスタイルオブジェクトを返します。
ご覧のとおり、該当する場合はすぐに元のcssメソッドを呼び出します。それ以外の場合、リストされているすべてのプロパティの計算されたスタイルを取得します（Firebugの計算されたスタイルリストから収集されます）。値の長いリストを取得していますが、非常に高速です。他の人にも役立つことを願っています。
2年遅れですが、探しているソリューションがあります。ここに私が書いたプラグインがあります（プラグイン形式で別の男の機能をラップすることで）あなたが望むものを正確に実行しますが、すべてのブラウザでall可能なスタイルを取得しますIE。
jquery.getStyleObject.js:
/*
* getStyleObject Plugin for jQuery JavaScript Library
* From: http://upshots.org/?p=112
*
* Copyright: Unknown, see source link
* Plugin version by Dakota Schneider (http://hackthetruth.org)
*/
(function($){
$.fn.getStyleObject = function(){
var dom = this.get(0);
var style;
var returns = {};
if(window.getComputedStyle){
var camelize = function(a,b){
return b.toUpperCase();
}
style = window.getComputedStyle(dom, null);
for(var i=0;i<style.length;i++){
var prop = style[i];
var camel = prop.replace(/\-([a-z])/g, camelize);
var val = style.getPropertyValue(prop);
returns[camel] = val;
}
return returns;
}
if(dom.currentStyle){
style = dom.currentStyle;
for(var prop in style){
returns[prop] = style[prop];
}
return returns;
}
return this.css();
}
})(jQuery);
基本的な使い方はとても簡単です：
var style = $("#original").getStyleObject(); // copy all computed CSS properties
$("#original").clone() // clone the object
.parent() // select it's parent
.appendTo() // append the cloned object to the parent, after the original
// (though this could really be anywhere and ought to be somewhere
// else to show that the styles aren't just inherited again
.css(style); // apply cloned styles
お役に立てば幸いです。
JQueryではありませんが、Firefoxでは、OperaおよびSafariではwindow.getComputedStyle(element)を使用して要素の計算されたスタイルを取得でき、IE <= 8ではelement.currentStyle。返されるオブジェクトはそれぞれの場合で異なり、Javascriptを使用して作成された要素とスタイルのどちらでうまく機能するかはわかりませんが、おそらく役に立つでしょう。
Safariでは、次のことができます。
document.getElementById('b').style.cssText = window.getComputedStyle(document.getElementById('a')).cssText;
あなたがこれまでに得た答えに満足しているかどうかはわかりませんが、私はそうではなく、私もあなたを喜ばないかもしれませんが、それは他の人を助けるかもしれません。
要素のスタイルを相互に「複製」または「コピー」する方法を熟考した後、nをループしてn2に適用するアプローチはあまり最適ではないことがわかりましたが、これに固執しています。
これらの問題に直面している場合、すべてのスタイルをある要素から別の要素にコピーする必要はほとんどありません。通常、「一部の」スタイルを適用する特定の理由があります。
私が元に戻したものは次のとおりです。
$.fn.copyCSS = function( style, toNode ){
var self = $(this);
if( !$.isArray( style ) ) style=style.split(' ');
$.each( style, function( i, name ){ toNode.css( name, self.css(name) ) } );
return self;
}
次のように、スペースで区切られたcss属性のリストを最初の引数として、それらをクローンするノードを2番目の引数として渡すことができます。
$('div#copyFrom').copyCSS('width height color',$('div#copyTo'));
それ以外に「不整合」と思われるものは何でも、スタイルシートで修正して、Jがあまりにも多くの誤ったアイデアで混乱しないようにします。
問題を調べてjQueryの内部cssメソッドがどのように機能するかをよりよく理解する時間ができたので、私が投稿した内容は、前述のユースケースに十分対応できるようです。
CSSを使用してこの問題を解決できることが提案されていますが、これは、クラスを削除したりCSSを更新したりしなくても、どのような場合でも機能するより一般的なソリューションだと思います。
私は他の人がそれが役に立つことを願っています。バグを見つけたら、私に知らせてください。
あなたの答えQuickredfoxが好きです。 CSSをコピーする必要がありましたが、すぐにはコピーしなかったため、「toNode」をオプションに変更しました。
$.fn.copyCSS = function( style, toNode ){
var self = $(this),
styleObj = {},
has_toNode = typeof toNode != 'undefined' ? true: false;
if( !$.isArray( style ) ) {
style=style.split(' ');
}
$.each( style, function( i, name ){
if(has_toNode) {
toNode.css( name, self.css(name) );
} else {
styleObj[name] = self.css(name);
}
});
return ( has_toNode ? self : styleObj );
}
このように呼び出す場合：
$('div#copyFrom').copyCSS('width height color');
次に、後で使用できるように、CSS宣言を含むオブジェクトを返します。
{
'width': '140px',
'height': '860px',
'color': 'rgb(238, 238, 238)'
}
出発点をありがとう。
多目的.css()
使用法
$('body').css(); // -> { ... } - returns all styles
$('body').css('*'); // -> { ... } - the same (more verbose)
$('body').css('color width height') // -> { color: .., width: .., height: .. } - returns requested styles
$('div').css('width height', '100%') // set width and color to 100%, returns self
$('body').css('color') // -> '#000' - native behaviour
コード
(function($) {
// Monkey-patching original .css() method
var nativeCss = $.fn.css;
var camelCase = $.camelCase || function(str) {
return str.replace(/\-([a-z])/g, function($0, $1) { return $1.toUpperCase(); });
};
$.fn.css = function(name, value) {
if (name == null || name === '*') {
var elem = this.get(0), css, returns = {};
if (window.getComputedStyle) {
css = window.getComputedStyle(elem, null);
for (var i = 0, l = css.length; i < l; i++) {
returns[camelCase(css[i])] = css.getPropertyValue(css[i]);
}
return returns;
} else if (elem.currentStyle) {
css = elem.currentStyle;
for (var prop in css) {
returns[prop] = css[prop];
}
}
return returns;
} else if (~name.indexOf(' ')) {
var names = name.split(/ +/);
var css = {};
for (var i = 0, l = names.length; i < l; i++) {
css[names[i]] = nativeCss.call(this, names[i], value);
}
return arguments.length > 1 ? this : css;
} else {
return nativeCss.apply(this, arguments);
}
}
})(jQuery);
主なアイデアは、 Dakota's ＆ HexInteractive's 回答から取得されます。
OPが提供する優れた機能。返される値を選択できるように、少し変更しました。
_(function ($) {
var jQuery_css = $.fn.css,
gAttr = ['font-family','font-size','font-weight','font-style','color','text-transform','text-decoration','letter-spacing','Word-spacing','line-height','text-align','vertical-align','direction','background-color','background-image','background-repeat','background-position','background-attachment','opacity','width','height','top','right','bottom','left','margin-top','margin-right','margin-bottom','margin-left','padding-top','padding-right','padding-bottom','padding-left','border-top-width','border-right-width','border-bottom-width','border-left-width','border-top-color','border-right-color','border-bottom-color','border-left-color','border-top-style','border-right-style','border-bottom-style','border-left-style','position','display','visibility','z-index','overflow-x','overflow-y','white-space','clip','float','clear','cursor','list-style-image','list-style-position','list-style-type','marker-offset'];
$.fn.css = function() {
if (arguments.length && !$.isArray(arguments[0])) return jQuery_css.apply(this, arguments);
var attr = arguments[0] || gAttr,
len = attr.length,
obj = {};
for (var i = 0; i < len; i++) obj[attr[i]] = jQuery_css.call(this, attr[i]);
return obj;
}
})(jQuery);
_独自の配列を指定して、必要な値を選択します。$().css(['width','height']);
$.fn.cssCopy=function(element,styles){
var self=$(this);
if(element instanceof $){
if(styles instanceof Array){
$.each(styles,function(val){
self.css(val,element.css(val));
});
}else if(typeof styles===”string”){
self.css(styles,element.css(styles));
}
}
return this;
};
使用例
$("#element").cssCopy($("#element2"),['width','height','border'])