Css to jquery .css()?

Question

[S Pankov]

Как можно автоматизировать копирование css свойств элемента с firebug или отладчика chrome, сразу в css обертке от jquery?



Элементов несколько десятков, создавать надо «на лету».

То есть с такого вот кода:

#simple {<br/>
 background-color: red;<br/>
 left:25%;<br/>
 width: 50%;<br/>
 height: 30px;<br/>
 bottom: 0px;<br/>
}<br/>

В нечто такое

.css({<br/>
 backgroundColor: 'red',<br/>
 left:'25%',<br/>
 width:'50%',<br/>
 height:'30px',<br/>
 bottom:'0px',<br/>
 })<br/>

Answer 1

[laticq]

Нашел только плагин, который копирует ВЕСЬ стиль объекта

/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 */

(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, l = style.length; i < l; i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            };
            return returns;
        };
        if(style = dom.currentStyle){
            for(var prop in style){
                returns[prop] = style[prop];
            };
            return returns;
        };
        return this.css();
    }
})(jQuery);

// Использовать так
        var style = $("#simple").getStyleObject();
       alert(JSON.stringify(style));
        $('#simple-clone').css(style);

Answer 2

[Vitaliy Petrychuk]

Не встречал, увы.
Можете сделать себе странику, с полем ввода и слушать событие change этого поля. А потом исполнить:

function fix(css) {
  if (!css) return false;
  var obj = {};
  css = css.split('\n').join('').split(' ').join('');
  css = css.slice(css.indexOf('{') + 1, css.indexOf('}') - 1).split(';');
  $.each(css, function(k, prop) {
    prop = prop.split(' ').join('').split(':');
    obj[prop[0]] = prop[1];
  })
  alert('.css(' + JSON.stringify(obj) + '})');
}

fix(_значение_из_поля_ввода_);

Или написать плагин — выделили текст, нажали волшебную кнопочку и в буфер обмена упал результат. Что было бы действительно «на лету» :)

Comments

[S Pankov]

Ну это я частный случай написал, а вообще в идеале копирование всех css свойств у какого то элемента в стиле jquery css

[Vitaliy Petrychuk]

Пардон :)
Если что-то найдете — оставьте ссылку