将 CSS 样式规则转换为 HTML 元素(反之亦然)
Convert CSS style rules to HTML elements (and vice versa)
我正在使用一个名为FresherEditor的实用程序,该实用程序使用jQuery的ContentEditable插件在浏览器窗口中创建可编辑的文档。然后,我需要获取该输出,并从通过将 HTML 管理的样式解析为 CSS 获得的规则生成 SVG 图形。
更新编辑器将产生类似于以下内容的输出:
<div>
<p>
<i>
<u>
<b>
<font face="Verdana">
Hello, World!
</font>
</b>
</u>
</i>
</p>
</div>
当我更喜欢的是看起来像这样的东西时:
<div>
<p style="font-weight: bold; font-style: italic; text-decoration: underline; font-family: Verdana;">
Hello, World!
</p>
</div>
任何建议都会有所帮助。
这是一个非常有趣的问题; 谢谢!以下是添加html2style()
和style2html()
方法的脚本。测试用例表明,您可以在两者之间进行转换,而无需视觉变化(尽管往返后元素嵌套的顺序可能会有所不同)。
显示这些工作的测试用例
http://jsfiddle.net/GaPBS/
将嵌套的 HTML 短语元素转换为样式属性
(function(scope){
var HTML2CSS = {
strong: function(e){ this.style.fontWeight = "bold"; },
b: function(e){ this.style.fontWeight = "bold"; },
em: function(e){ this.style.fontStyle = "italic"; },
i: function(e){ this.style.fontStyle = "italic"; },
font: function(e){ this.style.fontFamily = e.getAttribute('face'); },
u: function(e){ this.style.textDecoration += ' underline'; },
strike: function(e){ this.style.textDecoration += ' line-through'; }
};
scope.html2style = function(root){
for (var name in HTML2CSS){
var elements = root.querySelectorAll(name);
var styler = HTML2CSS[name];
for (var i=elements.length;i--;){
var toKill = elements[i],
parent = toKill.parentNode;
// Only swap out nodes that are the sole element child of the parent
if (!toKill.nextElementSibling && !toKill.previousElementSibling){
parent.removeChild(toKill);
// Move contents into the parent
for (var kids=toKill.childNodes,j=kids.length;j--;){
parent.insertBefore(kids[j],parent.firstChild);
}
// Merge existing styles from this node onto the parent
parent.style.cssText += toKill.style.cssText;
// Hard set the style for this node onto the parent
styler.call(parent,toKill);
}
}
}
}
})(this);
将样式属性转换为嵌套的 HTML 短语元素
(function(scope){
var CSS2HTML = {
"fontWeight:bold": "b",
"fontStyle:italic": "i",
"textDecoration:underline": "u",
"textDecoration:line-through": "strike",
"font-family:*": function(value){ var e=document.createElement('font'); e.setAttribute('face',value); return e; }
};
scope.style2html = function(root){
var leaf = root;
for (var style in CSS2HTML){
var elName = CSS2HTML[style],
parts = style.split(':'),
name = parts[0],
wild = parts[1]=="*",
regex = !wild && new RegExp("(^|''s)"+parts[1]+"(''s|$)"),
before = root.style[name];
if (before && (wild || regex.test(before))){
var el = (typeof elName==='function') ? elName(before) : document.createElement(elName);
for (var kids=leaf.childNodes,j=kids.length;j--;){
el.insertBefore(kids[j],el.firstChild);
}
leaf = leaf.appendChild(el);
root.style[name]=wild ? "" : before.replace(regex,"");
}
}
if (root.getAttribute('style')=="") root.removeAttribute('style');
}
})(this);
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何设置html元素填充的动画
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 表追加而不附加最后一个元素
- 如何在jQuery中获取元素的形式
- 我可以获得相对于被点击元素的确切点击位置吗
- 在函数中添加数组元素的数值
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 将视口底部滚动到元素底部
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 如何使用jquery处理php循环通过元素
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- jQuery取消选中并选中子元素的反之亦然复选框
- 单击按钮即可更改元素的类并重命名按钮名称,反之亦然
- 将 CSS 样式规则转换为 HTML 元素(反之亦然)