如何“重置”给定 HTML 元素的样式?

2024-03-15

我正在开发一个可嵌入的 javascript,它将 HTML 元素插入未知页面。我无法控制要插入 HTML 的页面的样式表。问题是我插入的 HTML 会被页面错误地风格化,我想防止这种情况发生。

确保我插入的元素是最不冗长和/或资源密集的exactly正如我希望的那样?有没有一种简单的方法可以清除给定 HTML 元素和子元素的所有样式?例如,在 Firebug 中,您可以删除所有样式。我感觉就像在那里must,并且至少should,是一种使某些 HTML 元素免受样式表规则约束的本机方法吗?

Example:

var myHTML = $("<div>my html in here</div>");
myHTML.resetAllStyles();   //<--- what would this function do?
myHTML.appendTo("body");

我真的想避免明确声明我插入的每个元素想要的属性......

PS:我在 JS 和 CSS 方面有丰富的经验,所以你可以假设我会理解你要告诉我的大部分内容。


我将把这个作为一种可能性扔掉。为您的小书签定制标签怎么样?由于 IE,需要对自定义 xml 命名空间进行更多修改,但可能对您有用。

jQuery 似乎也不介意。

http://jsfiddle.net/uvfAf/1/ http://jsfiddle.net/uvfAf/1/

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>​

我使用此页面来了解如何在 IE 中执行自定义标签:

http://happyworm.com/blog/tag/custom-tags/ http://happyworm.com/blog/tag/custom-tags/

EDIT:

看起来 IE 想要xmlns在 HTML 标签中定义,所以我将容器更改为<html>。不确定总体影响,但似乎有效。

我更新了示例和 jsFiddle。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何“重置”给定 HTML 元素的样式? 的相关文章

  • Angular4 - 滚动到锚点

    我正在尝试对同一页面上的锚元素进行简单的滚动 基本上 用户点击 尝试 按钮 它就会滚动到页面下方 ID 为 登录 的区域 现在 它正在与一个基本的id login a href login a 但它正在跳转到该部分 理想情况下 我希望它滚动
  • 使用 GD lib 过滤器标准化 CSS 过滤器

    我想让用户拖动范围滑块并通过实时预览 CSS 滤镜 调整图像的亮度和对比度 然后使用 GD 库保存调整 但是 我似乎无法从 CSS 过滤器和 GD lib 亮度和对比度过滤器获得相同的结果 我的 CSS 过滤器范围为 50 150 其中 1
  • 播放选定的音频,同时暂停/重置其他音频

    我有两个通过按钮的单击事件播放的音频元素 如果选择了另一个元素 我已成功地暂停其中一个元素 但还需要将暂停元素设置回 0 0 秒 即暂停和重置 我知道 Javascript 目前没有stop 导致的方法假设这将通过设置其来完成current
  • 有关 window.history.pushState 的帮助

    我需要语法方面的帮助 我的网站使用 AJAX 在 board div 中加载博客文章 然后单击 close 将其关闭 当我加载帖子时 网址变成这样http www visualise ca anne au cherry http www v
  • jQuery beforeunload 自定义弹出窗口用于离开页面

    您好 我想自定义离开页面的弹出窗口 有什么简单的方法可以做到这一点吗 我正在使用简单的 jQuery document ready function var myPopUp pop up css display block window b
  • 混合混合模式:乘法在 Chrome 中不起作用

    我正在尝试使用mix blend mode multiply在 Chrome 上 但它无法按预期工作 当我添加时magenta cyan and yellow在一起它不会给我黑色但brown https i stack imgur com
  • 使网格项跨越到隐式网格中的最后一行/列

    当我不知道行数时 是否可以使网格项跨度从第一行到最后一行 假设我有以下 HTML 内容 其中包含未知数量的框 我怎样才能做到第三个 box从第一条网格线到最后一条网格线 container display grid grid templat
  • 使用 Jquery 附加链接

    我正在尝试根据您所在的页面添加指向我的页面的链接 我使用 Squarespace 来构建这个网站 因此对我来说最简单的方法是使用 Javascript 或 Jquery 我认为我缺少的这个语法有问题 我已经尝试用 来打破引号 但这不起作用
  • 未捕获的类型错误:无法读取未定义的属性“prop”

    我有 6 个输入复选框 如果选中的复选框超过 3 个 则最后一个复选框将被取消选中 为了更好地理解 请参阅我之前的question https stackoverflow com questions 35195235 if checkbox
  • 测试 jQuery UI 工具提示是否打开

    我正在尝试控制自动打开和关闭jQuery 工具提示 http api jqueryui com tooltip 如何测试工具提示的当前状态是否为打开 我正在使用所有内容的最新版本 Thanks 您可以尝试检查是否有任何课程ui toolti
  • 从 html5

    我正在寻找一种方法来根据用户代理字符串将控件属性添加到视频标签 我不希望在 iPad 和 Android 之外的任何浏览器或设备上出现控件属性 所以我认为用户代理是最好的识别方法 因为 ipad 和 android 一词出现在各自的 UA
  • jQuery UI 可排序和对话

    是否可以在两个列表之间拖动 jQuery UI 可排序列表项 其中一个在 jQuery UI 对话框中 另一个不在 jQuery UI 对话框中 我正在尝试创建一个对话框 用户可以将表单字段从对话框中拖到页面上的表单中 但我无法将项目拖出对
  • 我可以在不同浏览器中获得一致的 CSS 颜色吗?

    我正在测试一个新网站 并且我有一个 div background color bbf6bb 这对我来说似乎无害 然而 在我的 MacBook Pro 上 Firefox 3 6 与 Safari 4 中的颜色看起来非常不同 在 Safari
  • iOS 键盘显示后分屏宽度

    我刚刚开始研究 Cordova 应用程序对分屏多任务处理的支持 到目前为止 该应用程序在模拟器中的 iPad 上显示和调整大小都很好 但是当我单击编辑字段并显示软件键盘时 100 宽度的值开始返回整个屏幕 而不是给出的窗口 初始显示 到目前
  • CSS:理解和调整字体的行距/行高

    有人问了一个非常相似的问题here https stackoverflow com questions 13701110 css remove line height leading on larger text但确实回答得足够了 CSS
  • CSS 动画自定义属性/变量

    一段时间以来我一直在努力让它发挥作用 关键是内部 div 将具有某种形状 并且可能会不止一个 这就是为什么我使用nth child选择器 这个内部 div 应该显示然后再次隐藏一段时间 问题是 我想在一个动画中为所有 后来的 多个内部 di
  • 在firefox上用js改变表单方法

    我需要使用 javascript jQuery 或纯 更改表单的方法属性 我的表单有 method post 我尝试用以下方法更改它 submit button click function var url input id url val
  • ASP.NET JQuery AJAX POST 返回数据,但在 401 响应内

    我的应用程序中有一个网页 需要调用我设置的 Web 服务来返回对象列表 这个调用是这样设置的 document ready function var response ajax type POST contentType applicati
  • 将下拉按钮和下拉菜单放在中心?

    div class dropup center block div
  • 我如何用 javascript/jquery 进行两指拖动?

    我正在尝试创建当有两个手指放在 div 上时拖动 div 的功能 我已将 div 绑定到 touchstart 和 touchmove 事件 我只是不确定如何编写这些函数 就像是if event originalEvent targetTo

随机推荐

  • 如何使用 WebBrowser 控件显示 XML?

    我有一个string其中包含一个xml 我想用它设置 WebBrowser 控件的值并显示为xml 我可以设置该值browser DocumentText 但是我如何让它显示为 XML 呢 为 PaoloFalabella 建议的第一个解决
  • 对关联数组的关联数组执行 foreach

    假设我有这样的设置 var whatever new Array whatever a new Array whatever a a test1 whatever a b test2 whatever b new Array whateve
  • 使用状态变量作为 SwiftUI 中函数的输入

    我有两个文本字段 用于更改两个 State 变量 即startingMileage 和endingMileage 的值 以及一个步进器 用于更改名为fuelAdded 的第三个 State 变量的值 我正在尝试使用用户的输入并进行计算来计算
  • 圆角后可成形图像视图上的黑色边缘

    After rounding the edges on my shapeable image view I still get black edges around the rounded edges 这是我的 xml
  • 如何使画布轮廓成为透明 png 以实现悬停发光

    是否可以自动为图像提供发光效果 例如使用画布 jsfiddle http jsfiddle net LAS8L 88 canvas 标签必须省略透明 并使其具有外发光
  • 如何在流畅的nhibernate中将复合主键映射到外国?

    我有以下表格 table A FOO PK CLIENT PK table B BAR PK CLIENT PK FK FOO FK PK gt 主键 FK gt 外键 A 和 B 之间存在一对多关系 我不能简单地这样做 class AMa
  • Flutter - 自定义按钮点击区域

    我正在构建一个 Flutter 应用程序 其中屏幕的很大一部分将被圆形按钮占据 我已经尝试了几种不同的方法来创建圆形按钮 但我总是遇到同样的问题 可点击 区域实际上不是圆形的 而是矩形的 这是一个使用以下方法获得的示例FloatingAct
  • 按任意键对元组列表进行排序

    order w x a z object a object x object z object a object w 如何根据 order 提供的键列表按第二个元素对上面的元组列表进行排序 2013 年 11 月 18 日更新 我发现了一个
  • 将值加载到 Selectize.js 中

    Problem 我有一个文本输入 我选择它作为标签 它可以很好地查询远程数据 我可以使用它搜索甚至创建新项目 并且一切正常 使用选择 var select authorsearch selectize valueField AuthorId
  • 使用 JavaScript 切换 CSS 类 - 错误

    我正在尝试制作一个脚本 当用户单击具有 burger nav img 类的图像时 它会在另一个元素中切换 open 类 我的代码是 HTML
  • Swing - 使用 getComponent() 更新所有 JButton

    我正在制作一个井字棋游戏 其中每个棋盘都由一个 JButton 代表 当有人单击该按钮时 文本将更改为 X 或 O 我正在编写一个重置函数 它将所有按钮中的文本重置为 我正在使用 getComponents 方法访问数组中的所有按钮 我只是
  • 为 GridView 的 PagerTemplate 动态生成页面链接按钮

    从 MSDN 页面获取PagerTemplate of the GridView控制 强调我的 通常 按钮控制添加到寻呼机模板中以执行寻呼操作 当单击 CommandName 属性设置为 Page 的按钮控件时 GridView 控件将执行
  • 是否可以在不使用 ApplicationContextAware 的情况下检索具有原型范围的 Spring bean

    使用Spring 3 1 如果我想检索具有原型范围的 bean 即我每次都想要该类的不同实例 是否可以在不使用 ApplicationContextaware 类的情况下检索该 bean 这就是我目前的做法 Component Qualif
  • ModuleNotFoundError:没有名为“建模”的模块

    我对深度学习和 python 非常陌生 我正在尝试重新创建该项目https github com Nagakiran1 Extending Google BERT as Question and Answering model and Ch
  • 能否阻止单个应用程序的 Microsoft 错误报告?

    我们有一个非托管 C 应用程序 它利用第 3 方 API 来读取 CAD 文件 对于某些损坏的 CAD 文件 第 3 方库崩溃并导致我们的 EXE 崩溃 因此 我们的主应用程序是一个单独的 EXE 这样它就不会受到崩溃的影响 然而 我们最终
  • 使用 java POI 插入表时 Open Office writer 崩溃

    我正在尝试使用 open office 使用 apache poi 以 docx 格式插入表 但是每次打开文件时文件都会崩溃 XWPFDocument document new XWPFDocument FileOutputStream o
  • 单击浏览器的后退按钮时重定向到特定页面

    这是一个有点菜鸟的问题 但事实就是这样 我有一个网站 用户只能通过下一页和后退按钮从一个页面导航到另一个页面 即有一个用户必须遵循的向导 向导的一部分包含不同的页面 一部分包含相同的页面但具有更改的 div 但从用户体验来看 它是不同的页面
  • Stream_Copy_To_Stream() 的替代方案 php

    我现在正在开发一个文件共享网站 遇到了一个小问题 我正在使用上传脚本 uploadify 它工作得很好 但如果用户想要 我希望上传的文件被加密 现在我有可以执行此操作的工作代码 如下所示 但我的服务器只有 1GB 或内存 并且使用strea
  • 如何在 WooCommerce 3+ 中进行调试

    我正在使用本教程为 Woocommerce 创建自定义运输方法https docs woocommerce com document shipping method api https docs woocommerce com docume
  • 如何“重置”给定 HTML 元素的样式?

    我正在开发一个可嵌入的 javascript 它将 HTML 元素插入未知页面 我无法控制要插入 HTML 的页面的样式表 问题是我插入的 HTML 会被页面错误地风格化 我想防止这种情况发生 确保我插入的元素是最不冗长和 或资源密集的ex