Question

我有CSS级联下来以设置提交输入的样式：

<input type="submit" class="dont-style" />

如何在此项目上取消应用任何CSS - 即，它看起来像默认的submit按钮？

Answer 1

CSS：级联样式表。它的名字......样式将级联下来。这个问题的正确答案是通过使用专用类来防止它发生。或者将所有样式覆盖为默认值。

但是我昨晚想到了这个问题，并且想到你可以将提交按钮放在iframe中。由于这是另一个文档，因此父级的样式不会影响iframe中的提交按钮。

虽然可以通过点击iframe中的提交按钮在父文档上提交表单，但它并不完全符合您的要求。

然后我想到了从iframe（隐藏）中的提交按钮获取计算样式，并将其与父项中提交按钮的计算样式进行比较。如果样式与默认样式不同（= iframe中元素的计算样式），则应用此默认样式。我想出了这个JSFIDDLE DEMO。它在IE和Chrome中运行但在Firefox中失败，因为getComputedStyle()在iframe中的元素上使用时返回0值（bug？）。

这不是你的答案的解决方案，但我感兴趣并认为我可能会分享这个实验。

$('#myiframe').contents().find('html').html('<html><head></head><body><input type="submit" id="iframesubm"  /></body></html>');


var elem1 = document.getElementById("parentsubm");
var style1 = window.getComputedStyle(elem1, null);

var iframe = document.getElementById('myiframe');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var elem2 = innerDoc.getElementById("iframesubm");
var style2 = window.getComputedStyle(elem2, null);



for(k in style1){
    if(style1[k] !==style2[k] && k.indexOf('-') <= 0 && !isFunction(style1[k]) ){
        console.log(k +' : parent-> '+style1[k]+' iframe-> '+style2[k]);
        elem1.style[k]=style2[k];

    }  
}

function isFunction(functionToCheck) {
 var getType = {};
 return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
}

在输入上强制默认外观[type =＆＃34; submit＆＃34;]

1 个答案: