Как переместить все вычисленные стили CSS из одного элемента и применить их к другому элементу с помощью JavaScript? - PullRequest
Новая
       7

Как переместить все вычисленные стили CSS из одного элемента и применить их к другому элементу с помощью JavaScript?

9 голосов
/ 28 сентября 2010

У меня есть внешняя таблица стилей, которая применяет некоторые стили к данному элементу.Я хочу иметь возможность полностью переместить эти стили (используя JavaScript) в другой элемент, не имея предварительного знания применяемых стилей.

CSS: 

td { padding: 5px }
div { }

HTML: 

<td>
    <div>
        Apply the TD styles to this DIV (instead of the TD).
    </div>
</td>

JavaScript: 

$(document).ready(function(){
    $('tr').children('td').each(function(){
        //move the td styles to div
    });
});

Как мне этого добиться?

Обновление: Чтобы было понятно, у меня нетконтроль над CSS.У меня нет возможности узнать, какие стили могут быть применены.Проблема, которую я пытаюсь решить, заключается в возможности взять элемент и скопировать его стили (которые могут быть неизвестны) и применить их к другому элементу.

Ответы [ 9 ]

8 голосов
/ 10 июня 2013

Это решение, которое я понял, оно смешивает document.defaultView.getComputedStyle и jQuery's .css (): 

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >            </script>
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div id="test" style="background-color: #FF7300">
        <p>Hi</p>
    </div>
    <a href="#" id="button">Apply styles</a>
    <script>
        $("#button").click(function() {
            var element = document.getElementById("test");
             $("#victim").css(document.defaultView.getComputedStyle(element, null));
        });
    </script>
    <div id="victim">
        <p>Hi again</p>
    </div>
</body>


//style.css 
#test {
    border: 3px solid #000000;
}

То, что это делает, копирует вычисленноеобъект стиля, включая style.css и встроенный стиль, и установите его для другого div с помощью jcuery's .css ()

. Надеюсь, я не понял вопроса правильно, и это то, что вам нужно.

Редактировать: Я забыл, что вы попросили «переместить» стиль, а не скопировать его.Удалить стили из предыдущего div очень просто, используя jremu's .removeClass () и используя .attr () для удаления атрибута стиля, но вы должны иметь в виду, что если к идентификатору элемента применяются какие-либо правила стиля, естьнет способа предотвратить их применение.

2 голосов
/ 08 июня 2013

Я знаю, это будет выглядеть грубо, но это работает. Первоначально скопировать все вычисленные стили из <td> и применить их к <div> легко с помощью этого плагина от Mike Dunn Проблематичным является удаление стилей из <td> после их копирования. Из того, что я могу сказать , единственное, что вы можете сделать, это вручную сбросить их по умолчанию с помощью .css().

Рабочий пример 

$.fn.copyCSS = function (source) {
    var dom = $(source).get(0);
    var dest = {};
    var style, prop;
    if (window.getComputedStyle) {
        var camelize = function (a, b) {
                return b.toUpperCase();
        };
        if (style = window.getComputedStyle(dom, null)) {
            var camel, val;
            if (style.length) {
                for (var i = 0, l = style.length; i < l; i++) {
                    prop = style[i];
                    camel = prop.replace(/\-([a-z])/, camelize);
                    val = style.getPropertyValue(prop);
                    dest[camel] = val;
                }
            } else {
                for (prop in style) {
                    camel = prop.replace(/\-([a-z])/, camelize);
                    val = style.getPropertyValue(prop) || style[prop];
                    dest[camel] = val;
                }
            }
            return this.css(dest);
        }
    }
    if (style = dom.currentStyle) {
        for (prop in style) {
            dest[prop] = style[prop];
        }
        return this.css(dest);
    }
    if (style = dom.style) {
        for (prop in style) {
            if (typeof style[prop] != 'function') {
                dest[prop] = style[prop];
            }
        }
    }
    return this.css(dest);
};

$('td').click(function () {
    $('div').copyCSS('td');

    $('td').removeAttr('style');

    $("td").css({
        'font-family': 'none',
            'font-size': 'none',
            'font-weight': 'none',
            'font-style': 'none',
            'color': '#000',
            'text-transform': 'none',
            'text-decoration': 'none',
            'letter-spacing': 'none',
            'word-spacing': 'none',
            'line-height': 'none',
            'text-align': 'none',
            'vertical-align': 'none',
            'direction': 'none',
            'background-color': 'transparent',
            'background-image': 'none',
            'background-repeat': 'none',
            'background-position': 'none',
            'background-attachment': 'none',
            'opacity': '1',
            'width': 'none',
            'height': 'none',
            'top': '',
            'right': '',
            'bottom': '',
            'left': '',
            'margin-top': '0',
            'margin-right': '0',
            'margin-bottom': '0',
            'margin-left': '0',
            'padding-top': '0',
            'padding-right': '0',
            'padding-bottom': '0',
            'padding-left': '0',
            'border-top-width': '0',
            'border-right-width': '0',
            'border-bottom-width': '0',
            'border-left-width': '0',
            'border-top-color': '0',
            'border-right-color': '0',
            'border-bottom-color': '0',
            'border-left-color': '0',
            'border-top-style': '0',
            'border-right-style': '0',
            'border-bottom-style': '0',
            'border-left-style': '0',
            'position': 'static',
            'display': '',
            'visibility': 'visible',
            'z-index': 'auto',
            'overflow-x': 'auto',
            'overflow-y': 'auto',
            'white-space': 'normal',
            'clip': 'auto',
            'float': 'none',
            'clear': 'none',
            'cursor': 'default',
            'list-style-image': 'none',
            'list-style-position': '0',
            'list-style-type': 'disc',
            'marker-offset': '',
            'padding': '0',
            'transition': 'none',
            'border-radius': 'none'
    });
});

Примечание: очевидно Я не включил сброс для всех возможных стилей.

2 голосов
/ 28 сентября 2010

РЕДАКТИРОВАТЬ : Этот ответ был написан до выяснения вопроса.

Дайте вашим элементам идентификаторы, например: 

<td id="td_element" style="padding:5px">
    <div id="div_element">
        Apply the TD styles to this DIV (instead of the TD).
    </div>
</td>

И используйте 

var td_element = $('#td_element')
$('#div_element').attr('style', td_element.attr('style'));
td_element.removeAttr('style');

Конечно, вы могли бы вместо этого использовать класс - или у вас могут быть элементы из предыдущего кода javascript. Вам нужно будет решить, как лучше всего ссылаться на элементы самостоятельно.

1 голос
/ 28 сентября 2010

Не двигайся стили - мой короткий ответ - найди другой путь. Можете ли вы загрузить другую таблицу стилей после загрузки таблицы стилей? Если это так, добавьте таблицу стилей, которая переопределяет отступы td и div, определенные в таблице стилей, на которую вы должны ссылаться.

1 голос
/ 28 сентября 2010

РЕДАКТИРОВАТЬ: код исправленВот.Обычно вы хотите сделать это с идентификатором или классом вместо фактического атрибута.

0 голосов
/ 30 января 2014

Вот как я это делаю: 

var elFrom = document.getElementById('fromID');
var computedStyle = document.defaultView.getComputedStyle(elFrom,null);
$.each(computedStyle,function(key,value) {
    $('#toID').css(value,$(elFrom).css(value));
});
0 голосов
/ 09 июня 2013

Вы можете попробовать следующие шаги, чтобы скопировать стили, определенные для конкретного элемента в таблицах стилей и тегах <style> (код немного длинен):

  1. Получить содержимое оригинальных таблиц стилей, используя ajax.и содержимое каждого <style> тега
  2. Анализ содержимого css в массив
  3. Для каждого селектора в проанализированной таблице стилей сравните его элемент dom с целевым элементом dom (из которого вы копируете стили).если какой-либо из них совпадает, тогда примените стили, соответствующие математическому селектору, к требуемому элементу

Вот код: 

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <style>
        #source { width: 100px; height: 100px; background-color: black; }
        </style>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
       <table>
            <tr>
                <td id="source"></td>
            </tr>
       </table>
       <div id="target"></div>
    </body>

    <script>
    var source = $('#source'); // source
    var target = $( '#target' ); // target

    $( 'link[rel="stylesheet"]' ).each( function() {
          $.get( $(this).attr( 'href' ), {}, function( data ) {
                 var css_obj = parse_css( data );
                 copy_css( css_obj, source, target );
          });
    });

    $( 'style' ).each( function() {
        var css = $(this).text();
        var css_obj = parse_css( css );
        copy_css( css_obj, source, target );
    })

    function copy_css( css_obj, source, target ) {
        for( selector in css_obj ) {
            if( $(selector)[0] === source[0] ) { // compare raw dom elements 
                for( prop in css_obj[selector] ) {
                    target.css( prop, css_obj[selector][prop] );
                }
            }                             
        }
    }


    function parse_css( css ) { 
        var css = css.replace( /[\s\n\t]+/g, ' ' ); // remove extra spaces, tabs and newlines
        css = css.replace( /\/\*(.|\n)+\*\//g, '' ); // remove comments
        css = css.split( '}' );  // split into groups
        var css_obj = []; // array to hold parsed css

        for( i in css ) {
            if( css[i] == false ) continue;
            var chunks = css[i].split( '{' );
            var selector = $.trim( chunks[0] );
            var style_defs = [];
            chunks = chunks[1].split( ';' );
            for( j in chunks ) {
                if( chunks[j] == false ) continue;
                var style_def = chunks[j].split( ':' );
                var property = $.trim( style_def[0] );
                var value = $.trim( style_def[1].replace( /\;$/, '' ) );
                style_defs[property] = value;
            }
            css_obj[selector] = style_defs;
        }
        return css_obj;
    }

    </script>

0 голосов
/ 05 июня 2013

Как насчет применения фактического стиля TD к классу? Затем просто измените класс TD и DIV. Или у вас нет доступа к таблице стилей?

CSS: 

.class_name { padding: 5px }

HTML: 

<td class="class_name">
    <div>
        Apply the TD styles to this DIV (instead of the TD).
    </div>
</td>

JavaScript: 

$(document).ready(function(){
    $('.class_name').removeClass('class_name').children('div').addClass('class_name');
});
0 голосов
/ 28 сентября 2010

И более обобщенное решение из предоставленных ответов ..

HTML 

<td style="padding:5px">
    <div class="inherit">
        Apply the TD styles to this DIV (instead of the TD).
    </div>
</td>

JS 

$('.inherit')
     .attr('style', $(this)
                    .parents('td')
                    .attr('style')
          )
     .parents('td')
     .removeAttr('style');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...