CSS和JS去除格式化是Web開(kāi)發(fā)中非常重要的一部分，因?yàn)槟J(rèn)的HTML元素樣式往往不符合我們的設(shè)計(jì)要求。CSS和JS可以讓我們對(duì)網(wǎng)頁(yè)樣式做出更精細(xì)的控制。下面我們來(lái)看看如何去除HTML默認(rèn)樣式。

/* 去除HTML默認(rèn)樣式 */
body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
/* 下劃線、加粗、清除列表樣式 */
a {
text-decoration: none;
color: #333;
font-weight: normal;
}
ul, ol {
list-style-type: none;
margin: 0;
padding: 0;
}
/* 去除表格邊框和默認(rèn)表格樣式 */
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}

上面的CSS代碼是去除HTML默認(rèn)樣式，主要包括：

• 去除body的margin和padding
• 去除a標(biāo)簽下劃線、加粗以及默認(rèn)顏色
• 去除ul和ol的列表樣式，包括list-style-type、margin和padding
• 去除table的邊框、表格間距和默認(rèn)寬度

// 去除button默認(rèn)樣式
button {
appearance: none;
background-color: transparent;
border: none;
color: inherit;
cursor: pointer;
font-size: inherit;
font-family: inherit;
padding: 0;
}

有時(shí)候我們需要去除button的默認(rèn)樣式，上面的CSS代碼可以去除button的默認(rèn)樣式。

// JS去除默認(rèn)樣式
var content = document.getElementById('content');
// 去除img的默認(rèn)邊框樣式
var imgs = content.getElementsByTagName('img');
for (var i=0; i<imgs.length; i++) {
imgs[i].style.border = 'none';
}
// 去除select的默認(rèn)樣式
var selects = content.getElementsByTagName('select');
for (var i=0; i<selects.length; i++) {
selects[i].style.webkitAppearance = 'none';
selects[i].style.mozAppearance = 'none';
selects[i].style.appearance = 'none';
selects[i].style.backgroundImage = 'url("data:image/svg+xml;utf8,")';
selects[i].style.backgroundRepeat = 'no-repeat';
selects[i].style.backgroundPosition = 'right center';
selects[i].style.backgroundSize = 'auto 100%';
selects[i].style.paddingRight = '25px';
}

上面的JS代碼可以去除img和select的默認(rèn)樣式。去除img的默認(rèn)邊框樣式可以使用imgs[i].style.border = 'none'; 實(shí)現(xiàn)，而去除select的默認(rèn)樣式需要修改webkitAppearance、mozAppearance和appearance，并增加一個(gè)背景圖片。