我如何“复位”给定HTML元素的样式？ [英] How can I "reset" styles for a given HTML element?
问题描述
我正在开发一个可嵌入的JavaScript，将HTML元素插入未知页面。我没有控制我将插入HTML的页面的样式表。问题是，我插入的HTML会错误地被页面风格化，我想阻止这种情况。
要确保最少的冗余和/我插入的元素是完全，我想他们是？有一个简单的方法来清除给定的HTML元素和孩子的所有样式吗？在firebug，例如，你可以删除所有的样式。我觉得必须，而且至少应是原生的方式，从样式表规则中豁免某些HTML元素？
示例：
var myHTML = $（< div> my html in here< / div>） ;
myHTML.resetAllStyles（）; //< ---这个函数会做什么？
myHTML.appendTo（body）;
我真的想避免明确说明我想要的每个元素的属性我插入...
PS：我有很多JS和CSS的经验，所以你可以假设我几乎能理解你要告诉我的任何东西。
我会把这个可能性。您的书签的自定义标签如何？由于IE，需要更多修改一个自定义xml命名空间，但可能适用于您。
jQuery似乎也不介意。
jQuery：
$（'＃tester'）。animate（{opacity：.3}，1000）;
HTML：
//不是主要的HTML标签。它们作为书签的根
//嵌入到正文中。害怕？也许。
< html xmlns：customtag>
< style>
@media all {
customtag\：someElement {
width：100px;
height：100px;
background：blue;
display：block;
}
customtag\：someOtherElement {
width：50px;
height：50px;
background：red;
display：block;
}
}
< / style>
< customtag：someElement id ='tester'> test< / customtag：someElement>
< customtag：someOtherElement> test< / customtag：someOtherElement>
< / html>
我使用这个网页找出如何做标签：
http： //happyworm.com/blog/tag/custom-tags/
EDIT：
看起来像IE想要在HTML标签中定义 xmlns ，所以我将容器更改为< html> 。
我更新了示例和jsFiddle。
I am working on an embeddable javascript which inserts HTML elements onto unknown pages. I have no control of the stylesheets of the pages I'll be inserting HTML into. The problem is that the HTML I insert will mistakenly stylized by the page, and I want to prevent that.
What's the least verbose and/or resource intensive to go about ensuring the elements I insert are exactly as I'd like them to be? Is there an easy way to clear all styling for a given HTML element and children? In firebug, for instance, you can remove all styling. I feel like there must, and the very least should, be a native way to exempt certain HTML elements from stylesheet rules?
Example:
var myHTML = $("<div>my html in here</div>");
myHTML.resetAllStyles(); //<--- what would this function do?
myHTML.appendTo("body");
I really want to avoid explicitly stating the attributes I want for each element I insert...
PS: I have a lot of experience with JS and CSS, so you can assume that I'll understand pretty much anything you're going to tell me.
I'm going to throw this out there as a possibility. How about custom tags for your bookmarklet? Requires a little more tinkering with a custom xml namespace because of IE, but may be workable for you.
jQuery doesn't seem to mind either.
jQuery:
$('#tester').animate({opacity: .3},1000);
HTML:
// Not the main HTML tags. These are embedded in the body as the root
// of the bookmarklet. Scary? Perhaps.
<html xmlns:customtag>
<style>
@media all {
customtag\:someElement {
width:100px;
height: 100px;
background: blue;
display: block;
}
customtag\:someOtherElement {
width: 50px;
height: 50px;
background: red;
display: block;
}
}
</style>
<customtag:someElement id='tester'>test</customtag:someElement>
<customtag:someOtherElement>test</customtag:someOtherElement>
</html>
I used this page to figure out how to do custom tags in IE:
http://happyworm.com/blog/tag/custom-tags/
EDIT:
Looks like IE wants the xmlns to be defined in HTML tags, so I changed the container to <html>. Not sure of the ramifications overall, but seems to work.
I updated the example and the jsFiddle.
这篇关于我如何“复位”给定HTML元素的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
