第三章 web前端开发工程师--JavaScript进阶程序设计 3-2 JavaScript属性操作应用_一转眼做前端开发整整10个年头了从最初刚出校门的懵懂小白到现在的所谓技术大-CSDN博客

本文链接：https://blog.csdn.net/wgf5845201314/article/details/90641419

本节课所讲内容：

JavaScript 新闻网站字体控制
JavaScript图片切换

主讲教师：Head老师

一. JavaScript 新闻网站字体控制

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js 属性操作应用</title>
    <script type="text/javascript" src="index.js"></script>
    <style type="text/css">
        .red{
            color: red;
        }
        .yellow{
            color: yellow;
        }
    </style>
</head>
<body>
    <input type="button" id="btn1" value="-">
    <input type="button" id="btn2" value="+">
    <input type="button" id="btn3" value="红色">
    <input type="button" id="btn4" value="黄色">
    <p id="p1" style="font-size:16px">
        "许多人都注意到，只要天气好，一些跳广场舞的地方就热闹欢
        腾；而遇到雾霾天，广场舞的声音立即就变小了。我也听说，
        咱们在做的一些部长们，出外散步时也习惯先要看看雾霾指数。
        4月26号，国务院常务部长们在会议上，李克强总理一连引用两个
        身边的实例说，“雾霾的确已成为事关每个人的民生通点。"
    </p>
</body>
</html>

index,js

window.onload=function(){
   var oBtn1 = document.getElementById("btn1"); 
   var oBtn2 = document.getElementById("btn2"); 
   var oBtn3 = document.getElementById("btn3"); 
   var oBtn4 = document.getElementById("btn4"); 
   var oP = document.getElementById("p1"); 
   var num = 32;
   //字体的缩小、放大
   oBtn1.onclick=function(){
       //alert(1);
       num -=2;
       oP.style.fontSize=num+"px";
   };
   oBtn2.onclick=function(){
       num+=2;
       oP.style.fontSize=num+"px";
   };
   //颜色变的换
   oBtn3.onclick=function(){
        oP.className="red";
   };
   oBtn4.onclick=function(){
       oP.className="yellow";
   }
}

二. JavaScript图片切换

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片切换</title>
    <script type="text/javascript" src="./index.js"></script>
</head>
<body>
    <input type="text" id="text1" value="格式./img/xx.png">
    <input type="button" id="btn1" value="点击切换图片">
    <img src="./img/3.png" alt="" id="img1"> 
</body>
</html>

index.js

window.onload=function(){
     var oBtn = document.getElementById("btn1");
     var oText = document.getElementById("text1");
     var oImg = document.getElementById("img1");

     oBtn.onclick=function(){
        // alert(1);
        oImg.src = oText.value;
     }
}