[用例]html元素的部分常用默认样式
[导读]<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/strict.dtd ><html><head><meta http-equiv= Content-Type content= text/html; charset=utf-8 &g...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>html元素的部分常用默认样式</title>
</head>
<body>
<div>div</div>
<span>span</span>
<p>p</p>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<b>b</b>
<i>i</i>
<strong>strong</strong>
<em>em</em>
<q>q</q>
<cite>cite</cite>
<acronym>acronym</acronym>
<blockquote>blockquote</blockquote>
<ins>ins</ins>
<del>del</del>
<sub>sub</sub>
<sup>sup</sup>
<big>big</big>
<small>small</small>
<address>address</address>
<pre>pre</pre>
<code>code</code>
<var>var</var>
<bdo>bdo</bdo>
<dfn>dfn</dfn>
<kbd>kbd</kbd>
<samp>samp</samp>
<a href="#">link</a>
<img src="/uploadfiles/2009/09111605734.gif">
<ul>
<li>li</li>
<li>li</li>
</ul>
<ol>
<li>li</li>
<li>li</li>
</ol>
<dl>
<dt>dt</dt>
<dd>dd</dd>
<dd>dd2</dd>
</dl>
<table>
<caption>caption</caption>
<colgroup></colgroup>
<thead>
<tr><th>th</th><th>th</th></tr>
<tr><td>td</td><td>td</td></tr>
</thead>
<tbody>
<tr><th>th</th><th>th</th></tr>
<tr><td>td</td><td>td</td></tr>
</tbody>
<tfoot>
<tr><th>th</th><th>th</th></tr>
<tr><td>td</td><td>td</td></tr>
</tfoot>
</table>
<form>
<fieldset>
<legend>legend</legend>
<input type="text">
<input type="password">
<input type="button" value="input button">
<button>button</button>
<select><option>option</option><optgroup label="group"><option>option</option></optgroup></select>
<input type="checkbox" id="cb">
<label for="cb">label</label>
<input type="radio">
<input type="file">
<textarea>textarea</textarea>
</fieldset>
</form>
<script type="text/javascript">
var NORMAL_STYLE = [
'display',
'margin-top',
'margin-bottom',
'margin-left',
'margin-right',
'padding-top',
'padding-bottom',
'padding-left',
'padding-right',
'border-left-width',
'border-right-width',
'border-top-width',
'border-bottom-width',
'border-left-style',
'border-right-style',
'border-top-style',
'border-bottom-style',
'overflow',
'font-weight',
'font-size',
'font-style',
'font-variant',
'text-decoration',
'line-height',
'border-collapse',
'vertical-align'
];
function toCamelCase(str) {
return str.replace(/-D/g, function(match){
return match.charAt(1).toUpperCase();
});
}
var tagMap = {};
function elementsStyles(el) {
elementStyles(el);
el = el.firstChild;
while (el) {
if (el.nodeType == 1) {
elementsStyles(el);
}
el = el.nextSibling;
}
}
var alterColor = false;
function elementStyles(el) {
var tagName = el.tagName;
if (tagMap[tagName]) {
return;
}
tagMap[tagName] = 1;
html.push('<tr><td>' + el.tagName + "</td>");
alterColor = !alterColor;
for (var i = 0, l = NORMAL_STYLE.length; i < l; i++) {
var sty = NORMAL_STYLE[i];
html.push('<td style="width:100px;' +(alterColor ? 'background:#f5f5f5' : '') + '" title="' + tagName + '|' + sty + '">',
elementStyle(el, sty),
'</td>');
}
html.push('</tr>');
}
function elementStyle(el, sty) {
var currentStyle = el.currentStyle || document.defaultView.getComputedStyle(el, null);
return currentStyle[toCamelCase(sty)];
}
var html = ['<table><col style="background:#eee"><tr style="background:#eee;"><td></td>'];
for (var i = 0, l = NORMAL_STYLE.length; i < l; i++) {
html.push('<td style="width:100px">' + NORMAL_STYLE[i] + '</td>');
}
html.push('</tr>');
//elementStyles(document.documentElement);
elementsStyles(document.body);
html.push('</table>');
document.body.innerHTML += html.join('');
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>html元素的部分常用默认样式</title>
</head>
<body>
<div>div</div>
<span>span</span>
<p>p</p>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<b>b</b>
<i>i</i>
<strong>strong</strong>
<em>em</em>
<q>q</q>
<cite>cite</cite>
<acronym>acronym</acronym>
<blockquote>blockquote</blockquote>
<ins>ins</ins>
<del>del</del>
<sub>sub</sub>
<sup>sup</sup>
<big>big</big>
<small>small</small>
<address>address</address>
<pre>pre</pre>
<code>code</code>
<var>var</var>
<bdo>bdo</bdo>
<dfn>dfn</dfn>
<kbd>kbd</kbd>
<samp>samp</samp>
<a href="#">link</a>
<img src="/uploadfiles/2009/09111605734.gif">
<ul>
<li>li</li>
<li>li</li>
</ul>
<ol>
<li>li</li>
<li>li</li>
</ol>
<dl>
<dt>dt</dt>
<dd>dd</dd>
<dd>dd2</dd>
</dl>
<table>
<caption>caption</caption>
<colgroup></colgroup>
<thead>
<tr><th>th</th><th>th</th></tr>
<tr><td>td</td><td>td</td></tr>
</thead>
<tbody>
<tr><th>th</th><th>th</th></tr>
<tr><td>td</td><td>td</td></tr>
</tbody>
<tfoot>
<tr><th>th</th><th>th</th></tr>
<tr><td>td</td><td>td</td></tr>
</tfoot>
</table>
<form>
<fieldset>
<legend>legend</legend>
<input type="text">
<input type="password">
<input type="button" value="input button">
<button>button</button>
<select><option>option</option><optgroup label="group"><option>option</option></optgroup></select>
<input type="checkbox" id="cb">
<label for="cb">label</label>
<input type="radio">
<input type="file">
<textarea>textarea</textarea>
</fieldset>
</form>
<script type="text/javascript">
var NORMAL_STYLE = [
'display',
'margin-top',
'margin-bottom',
'margin-left',
'margin-right',
'padding-top',
'padding-bottom',
'padding-left',
'padding-right',
'border-left-width',
'border-right-width',
'border-top-width',
'border-bottom-width',
'border-left-style',
'border-right-style',
'border-top-style',
'border-bottom-style',
'overflow',
'font-weight',
'font-size',
'font-style',
'font-variant',
'text-decoration',
'line-height',
'border-collapse',
'vertical-align'
];
function toCamelCase(str) {
return str.replace(/-D/g, function(match){
return match.charAt(1).toUpperCase();
});
}
var tagMap = {};
function elementsStyles(el) {
elementStyles(el);
el = el.firstChild;
while (el) {
if (el.nodeType == 1) {
elementsStyles(el);
}
el = el.nextSibling;
}
}
var alterColor = false;
function elementStyles(el) {
var tagName = el.tagName;
if (tagMap[tagName]) {
return;
}
tagMap[tagName] = 1;
html.push('<tr><td>' + el.tagName + "</td>");
alterColor = !alterColor;
for (var i = 0, l = NORMAL_STYLE.length; i < l; i++) {
var sty = NORMAL_STYLE[i];
html.push('<td style="width:100px;' +(alterColor ? 'background:#f5f5f5' : '') + '" title="' + tagName + '|' + sty + '">',
elementStyle(el, sty),
'</td>');
}
html.push('</tr>');
}
function elementStyle(el, sty) {
var currentStyle = el.currentStyle || document.defaultView.getComputedStyle(el, null);
return currentStyle[toCamelCase(sty)];
}
var html = ['<table><col style="background:#eee"><tr style="background:#eee;"><td></td>'];
for (var i = 0, l = NORMAL_STYLE.length; i < l; i++) {
html.push('<td style="width:100px">' + NORMAL_STYLE[i] + '</td>');
}
html.push('</tr>');
//elementStyles(document.documentElement);
elementsStyles(document.body);
html.push('</table>');
document.body.innerHTML += html.join('');
</script>
</body>
</html>
- 转载请注明来源：IT学习网 网址：http://www.t086.com/ 向您的朋友推荐此文章
- 特别声明： 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们，我们会尽快予以更正。