Как получить CSS контейнера Javascript и всех объектов в нем в Javascript или JQuery

Question

Некоторые элементы на моей странице отображаются через php-код. Иногда, при щелчках по ссылке, которые перенаправляют на страницу на том же сайте, я хочу вставить html-элементы, такие как div, span и т. Д. Через javascript, в их соответствующие места. Мой главный вопрос: как мне вставить элементы в соответствующем месте и применить к ним те же стили CSS, которые они имели бы, если бы они были вставлены через обычный поток, такой как код php или html.

Например, предположим, мне нужно вставить элемент div, в котором есть элемент span и элемент изображения, внутри контейнера, в котором есть другие элементы с такой же структурой:

<div class="container"><div><span></span><img /></div>...<div><span></span><img /></div> </div>  .  

Я хочу применить к моим вставленным элементам те же правила стиля, что и для других элементов. То есть вставлено

<div><span></span><img /></div>

должен иметь те же стили, что и

<style>

.container div {...} .container div span {...} .container div img {...}

Но я не хочу вручную вычислять стили, а затем добавлять эти стили в jquery. Как мне это сделать. Вторая часть этого вопроса: предположим, что в зависимости от браузера применяются условные стили. Теперь, как мне применить условные стили в зависимости от браузера, не пытаясь сделать это вручную?

Answer 1

Если вы создаете свой элемент с помощью jQuery, просто используйте addClass(), чтобы добавить класс container к родительскому <div> следующим образом:

var new_div = $('<div/>').addClass('container');
// or (whatever floats your boat)
var new_div = $(document.createElement('div')).addClass('container');

Затем он будет стилизован как любой другой div.container на вашей странице.

Если вы получаете свои элементы через AJAX, убедитесь, что к отправляемому HTML-файлу уже применен class.

Если вы просто добавляете элементы внутри <div class="container"> через jQuery, они автоматически следуют тому же стилю, что и остальные элементы, на основе разметки, которую вы разместили без добавления кода.

// The inserted elements automatically follows the rules
// in the internal and external stylesheet.
var container = $('div.container:first').append('<div><span></span><img /></div>');

Однако он не копирует встроенные стили автоматически. Их следует перенести во внутреннюю или внешнюю таблицу стилей.

Лично я считаю, что встроенные стили обычно являются запахами кода, если только они не используются для целей width и height в последнюю минуту в ситуациях с полями переменного размера.