如何使用Javascript从元素中删除默认文档样式

我试图创建一个div元素，它将一些文本显示为弹出窗口。但问题是，当我使用javascript创建元素时，div已经包含在文档样式表或外部css中定义的默认样式。例如：

popup = document.createElement("div");
popup.setAttribute("id","myElement");
popup.style.left = "100px";
popup.style.top = "100px";
popup.style.width = "100px";
popup.style.height = "100px";
document.body.appendChild(popup);

---

现在当它出现时，它已经有了颜色、边框等，因为在css中有一个div样式应用于这个元素。我希望它不会继承为文档本身定义的任何内容，我如何才能做到这一点，或者可能会覆盖原始样式？？？

我会为这些新的

div

s指定一个特定的类名，并链接一个自定义样式表，将该类的所有属性重置为所需的默认值（确保链接的样式在级联中具有必要的优先级）。将此重置移到JavaScript中听起来是个坏主意。

实现这一点的一种方法是使用此文档中的css覆盖所有可用属性集。但是使用JavaScript需要大量工作

更好的方法是向新创建的元素添加id或类。样式应具有适用于您正在创建的元素类型的所有属性。如果您缺少属性，则将从当前css中进行设置。

因此我制作了类似的内容。这可能不是理想的解决方案，但至少满足了我的要求：

函数显示菜单（）{
var弹出窗口；
//查看文档中是否已经定义了默认样式
var styleSheets=document.styleSheets；
var size=styleSheets.length；
var cssRules=新数组（）；
var规则=”；
变量css、len、st、sp；
对于（i=0；i）您必须手动覆盖所有重要的样式属性。哦，这听起来不是一个好主意，可能会有太多类似背景、图像、悬停效果、边框、颜色……这意味着我必须覆盖所有，没有其他方法了？注意我添加的“重要”*。有几个样式属性，但在您的示例中只有少数有意义。“有这个div样式应用于这个元素”-您的意思是您有
#myElement{…}
还是
div{…}
在您的cssyes中，div或该div的任何其他子表单（如hover等）以及由标准html、body{}定义的默认文本属性这个想法和Rob提到的一样。问题是即使对于新的样式表，我也不知道需要覆盖哪些元素，所以这是一个很大的工作。因为即使使用新样式，所有未被覆盖的元素仍然会被应用
function displayMenu(){ 
    var popup;

    //see if there is already default style defined in the document
    var styleSheets = document.styleSheets;
    var size = styleSheets.length;
    var cssRules = new Array();
    var rules = "";
    var css, len, st, sp;

    for (i=0;i<size;i++){
        cssRules[i] = styleSheets[i].rules || styleSheets[i].cssRules;
        for (j=0;j<cssRules[i].length;j++){
            if(cssRules[i][j].cssText.search(/div/i) != -1){
                css = cssRules[i][j].cssText;
                css = css.substr(((css.search("{"))+1),((css.search("}"))-(((css.search("{"))+1))));

                if((css.search("{") == -1) && (css.search("}") == -1)) {
                    //no of css-properties in this specific rule
                    len = css.split(";").length - 1;

                    for (k=0;k<len;k++){
                        st = css.search(";") + 1;
                        rules += css.substr(0,(css.substr(0,st).search(":")+1)) + "0\n";
                        css = css.substr(st);                       
                    }

                } else {} //ignore this rule
            }
        }
    }

    var reset = '.myStyle { '+ rules +' }\n';

    //now create a css Class which overwrite default document properties for this <div> element
    var myStyle = document.createElement('style');
    myStyle.type = 'text/css';
    //TODO: should be replaced with style from arguments
    myStyle.innerHTML = reset;
    document.getElementsByTagName('head')[0].appendChild(myStyle);

    //start creating the popup menu:
    var popup;
    popup = document.createElement("div");
    popup.setAttribute("id","guide_popup");
    popup.setAttribute("class","myStyle");

    //now define own style rules: (All basic properties need to be defined as there is none by defualt now)
    popup.style.top = top;
    popup.style.left = left;
    popup.style.width = width;
    popup.style.height = height;
    popup.style.zIndex = index;

    //TODO: should be replaced with str in aruguments
    var popup_text = document.createTextNode("This is my sample text");
    popup.appendChild(popup_text);

    //finally process the DOM
    document.body.appendChild(popup);

}