直接上代码，相信大家是看得懂的，最好的办法是把代码粘过去，自己修改试试，看看效果！
上面是刚开始的执行效果，相应的html，js，css展示如下：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML引入JS/CSS的三种方式</title>
<!--引入外部的css文件-->
<link rel="stylesheet" href="css/index.css" />
<!--引入外部的js文件-->
<script type="text/javascript" src="js/index.js" ></script>
<!--在head中添加js控制-->
<script type="text/javascript">
function onClickB1() {
document.getElementById("b1").innerHTML = "HEAD";
}
</script>
<!--在head中添加css修饰-->
<style type="text/css">
#j2 {
background-color: #808080;
}
</style>
</head>
<body bgcolor="#F5F5F5">
<div id="j1" class="divs">
<button id="b1" onclick="onClickB1()">在head中</button>
<p>方式一：将js代码写在head中，如本例所示，点击按钮改变按钮的内容！</p>
<p>
同理，也可以将css样式写在head中，如上面的代码所示，设置j2的背景色，这里需要注意的是，其实我在外部的css文件中也设置了j2的背景色，
所以这两处设置是冲突的，但实验证明，网页中显示的是在head中修饰的属性值，这也许就是近水楼台先得月吧！
</p>
</div>
<div id="j2" class="divs"">
<button id="b2" onclick="onClickJ2()">在body中</button>
<p>方式二：将js代码写在body中，如本例所示，点击按钮改变div的背景色！</p>
<p>同理，在html的body中也可以设置css样式，代码如下面所示，设置b3的文字颜色为红色。</p>
</div>
<div id="j3" class="divs">
<button id="b3" onclick="gaiBian()">在外部js中</button>
<p>方式三：将js代码写在外部js文件中，并在html文件的head中引入该js，在本例中，点击按钮改变按钮的内容，并改变div的颜色！【推荐】</p>
<p>当然，将css通过外部文件的方式引入html是最好的，也是推荐的方式。【推荐】</p>
<p style="background: red;"><strong>这里需要注意的是，和js不同的是，css可以直接写在组件的内部，例如在此，我将文字直接加粗,背景变红！</strong></p>
</div>
<!--在body中添加js控制-->
<script type="text/javascript">
function onClickJ2 () {
document.getElementById("j2").style.background = "red";
}
</script>
<style type="text/css">
#b3 {
color: red;
}
</style>
</body>
</html>
index.css
.divs {
width: 100%;
height: 250px;
background-color: grey;
/*margin的属性顺序是上右下左*/
margin: 10px 10px 5px 1px;
}
#j1 {
/*这里把上面divs中设置的背景颜色覆盖了*/
background-color: white;
}
#j2 {
/*这里把上面divs中设置的背景颜色覆盖了*/
background-color: whitesmoke;
}
#j3 {
/*这里把上面divs中设置的背景颜色覆盖了*/
background-color: antiquewhite;
}
index.js
function gaiBian () {
document.getElementById("b3").innerHTML = "外部成功";
document.getElementById("j3").style.background = "lemonchiffon";
}
三个按钮都点一遍后的效果：
原文地址：https://www.cnblogs.com/wsg25/p/10643435.html
时间： 2024-11-09 10:13:39