利用JavaScript對HTML和CSS實作簡單的動態操作-有解無憂

假如我們現在想通過JS對原本的HTML或者CSS的內容或樣式進行改變，比如說顯示或隱藏內容、彈出各類對話框、改變內容的property、打開關閉視窗等等，我們應該怎么做呢？

首先我們先了解幾個常用的JS代碼：

alert警告對話框，alert（）
confirm確認對話框，confirm（）
prompt訊息對話框，prompt（）
window.open打開新視窗，window.open(‘路徑引數’，‘打開視窗的位置和名稱’，‘自選引數’)
window.close關閉視窗，window.close（）
display隱藏或顯示屬性，Object.style.display=value
property改變樣式屬性，Object.style.property=new style

現在我們用上述代碼中的一些代碼來為網頁添加動態效果，

假如我現在要撰寫一個代碼，可以對網頁中的內容進行顏色、字體、寬高進行改變，隱藏內容、顯示內容、在新的視窗打開文中的網頁，最后還可以取消我剛才所改變的設定的操作，我們應該怎樣撰寫函式呢？

我們先有一個大致的思路：

定義一個可以改變字體顏色以及背景顏色的函式（利用property屬性）
定義一個可以改變”盒子“寬高的函式（利用property屬性）
定義隱藏內容的函式（利用display屬性）
定義顯示內容的函式（利用display屬性）
定義一個打開文中網頁的函式（利用window.open屬性）
定義取消剛才所有設定的函式

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>CSDN Wellfancy</title>
<style type="text/css">
body{font-size:15px;}
#words{
	font-size:'宋體';
    height:400px;
    width:600px;
	border:#333 solid 1px;
	padding:5px;}
p{
	line-height:18px;
	text-indent:2em;}
</style>
</head>
<body>
  <h2 id="title">利用JavaScript對HTML和CSS實作簡單的動態操作</H2>
  <div id="words"> 
     <h5>首先我們先了解幾個常用的JS代碼：</h5>
        <p>1. confirm確認對話框，confirm（）</p>
        <p>2. display隱藏或顯示屬性，Object.style.display=value</p>
        <p>3. property改變樣式屬性，Object.style.property=new styl</p>
		<p>4. 有更多關于JS的問題請訪問<a href="https://blog.csdn.net/weixin_53379398?spm=1000.2115.3001.5343">我的主頁</a></p>
  </div>
  <form>
  <!--設定好要用到的按鈕，并且呼叫函式-->
    <input type="button" onClick="changeColor()" value="改變顏色和字體" >  
    <input type="button" onClick="changeWH()" value="改變寬高" >
    <input type="button" onClick="hideText()" value="隱藏內容" >
    <input type="button" onClick="showText()" value="顯示內容" >
	<input type="button" onClick="cancelSet()" value="取消設定" >
	<input type="button" onClick="openLink()" value="打開文中的鏈接" >
   
  </form>
  <script type="text/javascript">
//定義"改變顏色和字體"的函式
function changeColor(){
    document.getElementById("title").style.color="blue";
    document.getElementById("words").style.backgroundColor="pink";
}

//定義"改變寬高"的函式
function changeWH(){
        document.getElementById("title").style.width="50px";
    document.getElementById("words").style.height="200px";
}

//定義"隱藏內容"的函式
function hideText(){
    document.getElementById("title").style.display="none";
    document.getElementById("words").style.display="none";
}
//定義"顯示內容"的函式
function showText(){
    document.getElementById("title").style.display="block";
    document.getElementById("words").style.display="block";
}
//定義“打開鏈接”的函式
function openLink(){
	 window.open('https://blog.csdn.net/weixin_53379398?spm=1000.2115.3001.5343','_blank','height=600px,width=800px,menubar=no,toolbar=no');
}//將新視窗的寬高分別設定為800和600px，并且沒有選單欄和工具列

//定義"取消設定"的函式
function cancelSet(){
    var myoption=confirm("是否要取消操作");
    if (myoption==true)
        document.getElementById("title").style="none";//如果取消設定點擊確定后，會將所有設定過的樣式清除，即none
    document.getElementById("words").style="none";
}
  </script>
</body>
</html>

運行結果：

原始狀態下