### Javascript插入样式的知识点
Javascript在前端开发中扮演着非常重要的角色，尤其在动态修改页面样式方面。本文将详细探讨如何利用Javascript进行样式的动态插入，并且涉及到与之相关的兼容性问题。
#### 动态插入样式的重要性
在前端开发中，为了实现诸如换肤、按钮点击响应样式改变等效果，常常需要动态地向页面中插入新的样式规则。这使得Javascript成为了一种实现页面动态交互的重要工具。尤其是在项目中，用户在别人的站点上点击按钮后，能够在目标站点页面下插入一个脚本来执行相关操作，这种情况下，Javascript的动态样式插入技术就显得尤为重要。
#### 动态插入样式的两种方法
1. **页面中引入外部样式**
这种方法涉及在HTML的`<head>`部分使用`<link>`标签引入一个外部的CSS样式文件。这是一个简单且大多数主流浏览器都支持的操作，例如：
```javascript
function includeLinkStyle(url){
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
```
然后调用`includeLinkStyle`函数，传入外部CSS文件的URL地址。
2. **在页面中使用`<style>`标签插入页面样式**
这种方法通过在页面中动态创建`<style>`元素，并直接在这个元素的文本内容中加入CSS规则来实现样式插入。需要注意的是，这种方式在不同的浏览器中存在兼容性问题。例如：
```javascript
function includeStyleElement(styles,styleId){
if(document.getElementById(styleId)){
return;
}
var style = document.createElement("style");
style.id = styleId;
document.getElementsByTagName("head")[0].appendChild(style);
if(style.styleSheet){
style.styleSheet.cssText = styles;
} else {
style.appendChild(document.createTextNode(styles));
}
}
```
在这段代码中，首先检查是否已经存在对应ID的`<style>`元素，如果不存在，则创建并插入到`<head>`标签中，然后根据浏览器的兼容性使用不同的方法来设置样式。
#### 兼容性问题及其解决方案
当涉及到在不同的浏览器中使用`<style>`标签插入样式时，特别是在Firefox等标准浏览器和IE浏览器中，可能会遇到兼容性问题。在标准浏览器中，`styleSheet`对象并不支持`cssText`属性，而需要逐个处理`cssRules`。在IE浏览器中，则可以直接修改`styleSheet.cssText`属性。YUI框架提供了一种跨浏览器的方法，即使用`document.createTextNode`方法将样式字符串添加到`<style>`标签内。
#### 实际应用案例
在实际应用中，可以创建一个`div`元素，并使用Javascript动态地插入到页面中，随后利用动态插入样式的方法为其添加样式。例如：
```javascript
var divObj = document.createElement("div");
divObj.id = "__div";
divObj.innerHTML = "测试js插入DOM和样式";
document.body.appendChild(divObj);
var styles = "#__div{background-color:#FF3300;color:#FFFFFF}";
includeStyleElement(styles,"newstyle");
```
在这个案例中，首先创建了一个`div`元素，然后为其添加了内联样式。通过`includeStyleElement`函数，我们把需要的样式规则插入到了页面的`<head>`中，使得`div`元素能够应用到这些样式。
#### 关于“手贱”的问题
在实际操作中，可能会由于操作不当导致一些问题，例如错误地覆盖了某些重要的元素或样式。文中提及的“手贱”就是指在开发过程中，由于疏忽或错误操作导致问题的发生。这就需要开发人员在实际编码过程中仔细检查代码，避免此类情况发生。
总结来说，Javascript动态插入样式是前端开发中一项重要的技能，它不仅能够实现页面的动态交互，还能够在不同浏览器中根据兼容性采取不同的策略。本文详细介绍了这两种插入样式的方法，并对相关兼容性问题进行了讨论，最后通过一个实际案例，展示了如何在开发中运用这些知识。希望本文能够帮助开发人员更好地理解和使用Javascript在前端开发中的动态样式插入技术。
