Как создать <стиль> тег с JavaScript?
Да, это наиболее вероятно возможно через Python и Java.
Все сводится к отправке правильной команды на принтер через USB.
Первые шаги:
- Узнайте что-нибудь о том, как работает USB
- Используйте что-то вроде Wireshark для прослушивания трафика на вашей шине USB, пока вы выполняете проверку дюз / очистку головки / и т.д. , через драйвер принтера
- Попробуйте скопировать этот трафик с языка по вашему выбору
7 ответов
Попытайтесь добавить style элемент к head, а не body.
Это было протестировано в IE (7-9), Firefox, Opera и Chrome:
var css = 'h1 { background: red; }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
head.appendChild(style);
style.type = 'text/css';
if (style.styleSheet){
// This is required for IE8 and below.
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
Вот сценарий, который добавляет стиль IE createStyleSheet() и addRule() методы к браузерам, которые не имеют их:
if(typeof document.createStyleSheet === 'undefined') {
document.createStyleSheet = (function() {
function createStyleSheet(href) {
if(typeof href !== 'undefined') {
var element = document.createElement('link');
element.type = 'text/css';
element.rel = 'stylesheet';
element.href = href;
}
else {
var element = document.createElement('style');
element.type = 'text/css';
}
document.getElementsByTagName('head')[0].appendChild(element);
var sheet = document.styleSheets[document.styleSheets.length - 1];
if(typeof sheet.addRule === 'undefined')
sheet.addRule = addRule;
if(typeof sheet.removeRule === 'undefined')
sheet.removeRule = sheet.deleteRule;
return sheet;
}
function addRule(selectorText, cssText, index) {
if(typeof index === 'undefined')
index = this.cssRules.length;
this.insertRule(selectorText + ' {' + cssText + '}', index);
}
return createStyleSheet;
})();
}
можно добавить внешние файлы через
document.createStyleSheet('foo.css');
и динамично создать правила через
var sheet = document.createStyleSheet();
sheet.addRule('h1', 'background: red;');
Пример, который работает и совместим со всеми браузерами:
var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(ss);
Я предполагаю, что Вы желаете вставить style тег по сравнению с link тег (ссылающийся на внешний CSS), таким образом, это - то, что делает следующий пример:
<html>
<head>
<title>Example Page</title>
</head>
<body>
<span>
This is styled dynamically via JavaScript.
</span>
</body>
<script type="text/javascript">
var styleNode = document.createElement('style');
styleNode.type = "text/css";
// browser detection (based on prototype.js)
if(!!(window.attachEvent && !window.opera)) {
styleNode.styleSheet.cssText = 'span { color: rgb(255, 0, 0); }';
} else {
var styleText = document.createTextNode('span { color: rgb(255, 0, 0); } ');
styleNode.appendChild(styleText);
}
document.getElementsByTagName('head')[0].appendChild(styleNode);
</script>
</html>
кроме того, я заметил в Вашем вопросе, что Вы используете innerHTML. Это - на самом деле нестандартный способ вставить данные в страницу. Лучшая практика должна создать текстовый узел и добавить его к другому узлу элемента.
Относительно Вашего заключительного вопроса, Вы собираетесь услышать, что некоторые люди говорят, что Ваша работа должна работать через все браузеры. Все это зависит от Вашей аудитории. Если никто в Вашей аудитории не использует Chrome, то не потейте он; однако, если Вы надеетесь достигать самой многочисленной возможной аудитории, затем лучше поддерживать все главные браузеры A-класса
Вот вариант для динамического добавления класса
function setClassStyle(class_name, css) {
var style_sheet = document.createElement('style');
if (style_sheet) {
style_sheet.setAttribute('type', 'text/css');
var cstr = '.' + class_name + ' {' + css + '}';
var rules = document.createTextNode(cstr);
if(style_sheet.styleSheet){// IE
style_sheet.styleSheet.cssText = rules.nodeValue;
} else {
style_sheet.appendChild(rules);
}
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(style_sheet);
}
}
}
Все хорошо, но для того, чтобы styleNode.cssText работал в IE6 с узлом, созданным javascipt, вам нужно добавить узел в документ, прежде чем устанавливать cssText ;
дополнительная информация @ http://msdn.microsoft.com/en-us/library/ms533698%28VS.85%29.aspx