создать <style>
 

как можно создать новый CSSStyleDeclaration без создания его через document.createElement('style') и без импорта его в существующую таблицу стилей?

есть способ, но он только для XML. как дела обстоят с HTML?

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentDocument || iframe.contentWindow.document;
doc.open();
doc.write('<style>.b-block { text-decoration: underline; }</style>');
doc.close();
console.log(doc.styleSheets[0].cssRules[0].style);

или может ты лучше расскажешь, чего ты пытаешься добиться? И, кстати, как это сделать в xml?

эх, не то :)

я думал,есть проще, типа document.createCSSSheet("type","media"), который я пропустил.

в XML так

var style = DocumentImplementation.createCSSStyleSheet(title, media);

я хочу написать свою функцию для изменения стиля элемента. делаю через таблицы стилей,чтобы меньше отрисовок для браузера было

заодно и будет анимация на css transition

А чем создание элемента style не угодило?

у меня появилось чувство,что я что-то делаю не так. просто этот элемент был награжден такими методами и свойствами, которые уж точно не могли создаваться через обычный createElement

оказалось, может )

это как писать +2.0 + ""

но я ведь не всерьез тот код привел :)

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

потом, непонятно почему эти методы не подходят: "без создания его через document.createElement('style') и без импорта его в существующую таблицу стилей?" Ты же собирался как-то применить это правило, значит оно должно бытьв какой-то таблице стилей

потому что при добавлении через CSSStyleDeclaration ( проще, element.style ) отрисовка происходит через каждое действие.

а так..

<style>div{border: 5px solid;background-color:red;border-top-style:dashed;border-bottom-width:10px;border-left-color:blue;}</style><div>ololo</div>

в консоли видно, что есть только три PAINT после Event Click. ( 1056х180 )

а теперь попробуем сделать это через JS

<div id="one">ololo</div>

<script>

var s = document.getElementById( "one" ).style;

s.border = "5px solid";
s.backgroundColor = "red";
s.borderTopStyle = "dashed";
s.borderBottomWidth = "10px";
s.borderLeftColor = "blue";

</script>

видим : 2 Recalculate Style и 4 Paint

телодвижений больше