Javascript 保存VML和CSS标记
我正在使用Internet Explorer生成圆角。包含圆角元素的页面经常被加载,为了圆角和修复PNG,roundies脚本必须运行多次。这要花很多时间。该脚本生成一些放置在目标元素中的VML元素,以及一些注入到块中的CSS 我想保存VML和CSS,以便在页面加载时重用,这样我就不必每次都运行脚本。目标元素已经保存在数据库中,并在加载时通过java重新插入DOM 我制作了一个测试页面,在roundies脚本运行之后,我获取元素的html,包括VML、XML名称空间和CSS。我在IE中获取块的innerHTML时遇到了一些问题,但是我能够使用IE开发工具获取它,这样我就可以测试它了。在得到各种片段后,我将它们放在一个单独的HTML文件中,以查看它们是否能够正确呈现。我的测试不起作用 这是第一个测试页面:Javascript 保存VML和CSS标记,javascript,jquery,css,rounded-corners,vml,Javascript,Jquery,Css,Rounded Corners,Vml,我正在使用Internet Explorer生成圆角。包含圆角元素的页面经常被加载,为了圆角和修复PNG,roundies脚本必须运行多次。这要花很多时间。该脚本生成一些放置在目标元素中的VML元素,以及一些注入到块中的CSS 我想保存VML和CSS,以便在页面加载时重用,这样我就不必每次都运行脚本。目标元素已经保存在数据库中,并在加载时通过java重新插入DOM 我制作了一个测试页面,在roundies脚本运行之后,我获取元素的html,包括VML、XML名称空间和CSS。我在IE中获取块的i
<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>
$(函数(){
DD#u roundies.addRule('#block_1','20px 20px 0',true);
DD#u roundies.addRule('#block_2','0 20px 20px 0',true);
DD#u roundies.addRule('0#block_3','0 20px 20px',true);
DD#u roundies.addRule(“#block_4”,“20px 0 20px”,true);
$('#getContent')。单击(函数(){
var allHTML=$('#allContent').html();
$('#captureContent').text(allHTML).val(allHTML);
});
$('#getStyles')。单击(函数(){
var allStyles=$('#allStyles').html();
$('#captureStyles').text(所有样式).val(所有样式);
});
});
.街区{
宽度:150px;
高度:100px;
保证金:5px;
边框:3px实心#999;
}
获取样式
得到满足
任何帮助都将不胜感激,谢谢 第一个问题是,根据您使用的浏览器,您将获得不同的CSS(这对您来说可能很明显!)。CSS3圆角标准尚未稳定,Firefox、基于Webkit的浏览器(Safari、Chrome)和Opera上所需的CSS将有所不同。因此,您需要使用不同的开发工具来获取CSS/VML 在Firefox中使用Firebug,您可以获得以下信息:
#block_1 {
-moz-border-radius:20px 20px 0 0;
}
#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;
}
使用Chrome的开发者工具,您可以获得:
#block_1 {
-moz-border-radius:20px 20px 0 0;
}
#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>
.街区{
宽度:150px;
高度:100px;
保证金:5px;
边框:3px实心#999;
}
DD#u roundies.addRule('#block_1','20px 20px 0',true);
然后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>
DD_roundies\:*{
行为:url(#默认值#VML)
}
#第1区{
;行为:表达式(DD_roundies.roundify.call(this[20,20,0,0]))
}
.街区{
底部边框:999 3px实体;左侧边框:999 3px实体;边距:5px;宽度:150px;高度:100px;顶部边框:999 3px实体;右侧边框:999 3px实体
}
现在的工作是将所有各种CSS/VML开发工具转储重新组合到一个HTML文件中,希望不再需要DD_循环!或者,你可以信任DD_roundies来完成它的工作。就我个人而言,我总是面临着尝试更具挑战性的任务的危险,而简单的任务会做得更好 你有活生生的例子吗?