Добавление CSS в главный тег из тела с помощью jQuery

Question

Я видел два метода добавления CSS в голову HTML-страницы из тела с использованием JavaScript и jQuery, что предпочтительнее?

$('head').append("<style type='text/css'> my CSS <\/script>"); 

или

var styleElement = document.createElement('style'); 
    var styleText = 'my CSS'; 
    var headElements = document.getElementsByTagName('head'); 
    styleElement.type = 'text/css'; 
    if (headElements.length == 1) { 
    headElements[0].appendChild(styleElement); 
    } else if (document.head) { 
    document.head.appendChild(styleElement); 
    } 
    if (styleElement.styleSheet) { // IE 
     styleElement.styleSheet.cssText = styleText; 
    } else { // Other browsers 
     var textNode = document.createTextNode(styleText); 
     styleElement.appendChild(textNode); 
    } 

Очевидно, что первый намного короче, но это менее принято?

Answer 1

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

Люди будут спорить (и, как правило, они будут правильны), что выполнение исходного кода Javascript быстрее, чем если бы оно выполнялось с помощью jQuery --- и почему бы и нет? jQuery абстрагирует необработанные вызовы Javascript от того, что вы делаете, чтобы представить хороший синтаксис и удобство. Это означает, что при использовании jQuery вы будете налагать дополнительные накладные расходы, так как ваши команды будут выполнять zig и zag через его внутренности, пока не попадут в ту часть, где она «переводит» то, что вы делаете, в исходный код Javascript.

Но опять же, написание исходного кода Javascript может быть не только утомительным время от времени (просто посмотрите на весь этот код!), Но также подвержен кросс-браузерным проблемам (которые jQuery пытается нормализовать), и может быть труднее читать непосвященным. Действительно ли преимущество в производительности действительно стоит?

Это вопрос того, где и что вы пытаетесь сделать, честно говоря. Здесь я бы сказал, что преимущества перехода на Javascript незначительны. Попадите в jQuery.

Answer 2

Ваш первый вариант - приемлемый способ добавления CSS в раздел главы. Использование JQuery обеспечит наиболее совместимое с кросс-браузером решение.

Answer 3

Что вы подразумеваете под accepted? Когда вы используете jQuery, ваш код имеет только одну строку, но структура jQuery, скорее всего, сделает то же, что вы упомянули в своей второй идее реализации. Когда вы уже используете jQuery, вы можете захотеть использовать jQuery. Но не включайте всю структуру, если вы используете ее только для этой цели.