<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>html元素的部分常用默认样式</title>
<style type="text/css">
#tb
{
border-collapse: collapse;
}
#tb td
{
border: 1px solid #ddd;
padding:2px;
font-family:新宋体;
font-size:14px;
}
</style>
</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',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight',
'paddingTop',
'paddingBottom',
'paddingLeft',
'paddingRight',
'borderLeftWidth',
'borderRightWidth',
'borderTopWidth',
'borderBottomWidth',
'borderLeftStyle',
'borderRightStyle',
'borderTopStyle',
'borderBottomStyle',
'overflow',
'fontWeight',
'fontSize',
'fontStyle',
'fontVariant',
'textDecoration',
'lineHeight',
'borderCollapse',
'textAlign',
'verticalAlign'
];
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 style="font-weight:bold;">' + 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 id="tb" cellpadding=0 cellspacing=0 border=0><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;font-weight:bold;">' + 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元素的部分常用默认样式
最新推荐文章于 2022-10-24 22:24:53 发布