Home > Web Front-end > Front-end Q&A > How to cancel the border in html5

How to cancel the border in html5

WBOY
Release: 2022-06-15 17:27:44
Original
4064 people have browsed it

在html5中,可以利用border属性来取消边框,该属性会在一个声明中设置所有的边框属性,当该属性的值设置为“0”时就会取消边框的样式,语法为“”。

How to cancel the border in html5

本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

html5怎么取消边框

border 属性在一个声明中设置所有边框属性。

语法:

Object.style.border=borderWidth borderStyle borderColor
Copy after login

How to cancel the border in html5

示例如下:

<html>
<head>
<style type="text/css">
p
{ 
border: thin dotted #FF0000;
}
</style>
<script type="text/javascript">
function changeBorder()
{
document.getElementById("p1").style.border="none";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorder()" value="Change border" />
<p id="p1">This is a paragraph</p>
</body>
</html>
Copy after login

输出结果:

How to cancel the border in html5

示例:

<html>
<body>
<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<table border="0">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
</body>
</html>
Copy after login

输出结果:

How to cancel the border in html5

(学习视频分享:css视频教程html视频教程

The above is the detailed content of How to cancel the border in html5. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template