个人中心
gpt4 book ai didi

javascript - 保存 VML 和 CSS 标记

转载 作者：行者123 更新时间：2023-11-28 12:27:02 25 4
gpt4 key购买 nike

我正在使用 DD_roundies在 Internet Explorer 中生成圆 Angular 。具有圆 Angular 元素的页面经常被加载，roundies 脚本必须运行很多次来圆 Angular 和修复 png。这会花费很多时间。该脚本生成一些放置在目标元素中的 VML 元素，以及一些注入(inject)到 block 中的 CSS。

我想保存 VML 和 CSS 以在页面加载时重复使用，这样我就不必每次都运行脚本。目标元素已保存在数据库中，并在加载时通​​过 java 重新插入到 DOM 中。

我制作了一个测试页面，在 roundies 脚本运行后，我获取了元素的 html，包括 VML、XML 命名空间和 CSS。我在 IE 中获取 block 的 innerHTML 时遇到了一些麻烦，但我能够使用 IE 开发人员工具获取它，以便我可以对其进行测试。在获得各种片段后，我将它们放在一个单独的 HTML 文件中，以查看它们是否会正确呈现。我的测试没有成功。

这是第一个测试页:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript">
$(function(){
   DD_roundies.addRule('#block_1', '20px 20px 0 0', true);
   DD_roundies.addRule('#block_2', '0 20px 20px 0', true);
   DD_roundies.addRule('#block_3', '0 0 20px 20px', true);
   DD_roundies.addRule('#block_4', '20px 0 0 20px', true);
   $('#getContent').click(function(){
      var allHTML = $('#allContent').html();
      $('#captureContent').text(allHTML).val(allHTML);
   });
   $('#getStyles').click(function(){
      var allStyles = $('#allStyles').html();
      $('#captureStyles').text(allStyles).val(allStyles);
   });
});
</script>
<div id="allContent">
<script src="http://www.dillerdesign.com/experiment/DD_roundies/DD_roundies_0.0.2a-min.js" type="text/javascript"></script>
<style id="allStyles" type="text/css">
   .blocks{
      width: 150px;
      height: 100px;
      margin: 5px;
      border: 3px solid #999;
   }
</style>
<div id="block_1" class="blocks"></div>
<div id="block_2" class="blocks"></div>
<div id="block_3" class="blocks"></div>
<div id="block_4" class="blocks"></div>
</div>
<button id="getStyles">Get Styles</button>
<textarea id="captureStyles"></textarea>
<br />
<button id="getContent">Get Content</button>
<textarea id="captureContent"></textarea>

任何帮助将不胜感激，谢谢!

最佳答案

第一个问题是您会根据使用的浏览器获得不同的 CSS(这对您来说可能是显而易见的!)。 CSS3 圆 Angular 标准尚未稳定，所需的 CSS 在 Firefox、基于 Webkit 的浏览器(Safari、Chrome)和 Opera 上会有所不同。因此，您需要使用不同的开发工具来获取 CSS/VML。

在 Firefox 中使用 Firebug，您可以获得:

#block_1 {
  -moz-border-radius:20px 20px 0 0;
}

使用 Chrome 的开发者工具，您可以获得:

#block_1 {
  border-bottom-left-radius: 0px 0px;
  border-bottom-right-radius: 0px 0px;
  border-top-left-radius: 20px 20px;
  border-top-right-radius: 20px 20px;
}

如果我将您的示例简化为:

<script src="http://www.dillerdesign.com/experiment/DD_roundies/DD_roundies_0.0.2a-min.js" type="text/javascript"></script>
<style id="allStyles" type="text/css">
   .blocks{
      width: 150px;
      height: 100px;
      margin: 5px;
      border: 3px solid #999;
   }
</style>
<div id="block_1" class="blocks"></div>
<script type="text/javascript">
DD_roundies.addRule('#block_1', '20px 20px 0 0', true);
</script>

然后 IE8 开发者工具给了我:

<HTML XMLNS:DD_roundies = "urn:schemas-microsoft-com:vml"><HEAD>
<STYLE>DD_roundies\:* {
    BEHAVIOR: url(#default#VML)
}
#block_1 {
    ; BEHAVIOR: expression(DD_roundies.roundify.call(this, [20,20,0,0]))
}
</STYLE>

<STYLE id=allStyles type=text/css>.blocks {
    BORDER-BOTTOM: #999 3px solid; BORDER-LEFT: #999 3px solid; MARGIN: 5px; WIDTH: 150px; HEIGHT: 100px; BORDER-TOP: #999 3px solid; BORDER-RIGHT: #999 3px solid
}
</STYLE>
</HEAD>
<BODY style="POSITION: relative; ZOOM: 100%">
<ignore style="Z-INDEX: 0; WIDTH: 150px; HEIGHT: 100px; TOP: 15px; LEFT: 15px">
<DD_roundies:shape style="Z-INDEX: 0; POSITION: absolute; WIDTH: 150px; HEIGHT: 100px; TOP: 0px; LEFT: 0px" coordsize = "300,200" coordorigin = "1,1" filled = "f" fillcolor = "black" stroked = "f" path = " m6,40 l6,194 qy6,194 l294,194 qx294,194 l294,40 qy260,6 l40,6 qx6,40 e"><DD_roundies:fill></DD_roundies:fill></DD_roundies:shape><DD_roundies:shape style="Z-INDEX: 0; POSITION: absolute; WIDTH: 150px; HEIGHT: 100px; TOP: 0px; LEFT: 0px" coordsize = "150,100" coordorigin = "1,1" filled = "f" fillcolor = "none" stroked = "f" path = " m3,20 qy20,3 l131,3 qx148,20 l148,98 qy148,98 l3,98 qx3,98 l3,20 e"><DD_roundies:fill type = "tile"></DD_roundies:fill></DD_roundies:shape><DD_roundies:shape style="Z-INDEX: 0; POSITION: absolute; WIDTH: 150px; HEIGHT: 100px; TOP: 0px; LEFT: 0px" coordsize = "300,200" coordorigin = "1,1" fillcolor = "#999" stroked = "f" path = " m0,40 qy40,0 l260,0 qx300,40 l300,200 qy300,200 l0,200 qx0,200 l0,40 m6,40 l6,194 qy6,194 l294,194 qx294,194 l294,40 qy260,6 l40,6 qx6,40 e"><DD_roundies:fill></DD_roundies:fill></DD_roundies:shape></ignore>
<DIV style="POSITION: relative; ZOOM: 1; BEHAVIOR: none" id=block_1 class=blocks isImg="false"></DIV>
</BODY>
</HTML>

现在的工作是将所有各种 CSS/VML 开发工具转储重新组合到一个 HTML 文件中，希望它不再需要 DD_roundies!或者，您可以只信任 DD_roundies 来完成它的工作。就我个人而言，当简单的任务会做得更好时，我总是有尝试更具挑战性的任务的危险!

关于javascript - 保存 VML 和 CSS 标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3449923/

25 4 0
文章推荐： javascript - 如何限制网站js文件的下载？
文章推荐： css - 带滚动条的固定框？
文章推荐： javascript - 创建分层 JSON 对象
文章推荐： javascript - 使用 HTML onClick 将 PHP 变量作为参数传递
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com