html dom動態改變字型
阿新 • • 發佈：2018-12-26
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> a:link,visited { background-color: #b3d4fc; text-decoration: none; } a:hover { background-color: yellow; } .max{ font-size: 50px; background-color: blue; color: #222222; } .middle{ font-size: 20px; background-color: darkgreen; color: #222222; } .min{ font-size: 10px; background-color: beige; color: #222222; } </style> </head> <body> <script type="text/javascript" src="js/write.js"></script> <script type="text/javascript"> function changeFont(size) { var oDivNews=document.getElementById("divNews"); oDivNews.style.fontSize=size; } function changeFontBySelector(selectorName) { var oDivNews=document.getElementById("divNews"); oDivNews.className=selectorName; } </script> <h1>晚間新聞</h1> <a href="javascript:void(0)" onclick="changeFontBySelector('max')">大字型</a> <!--取消預設的點選 --> <a href="javascript:void(0)" onclick="changeFontBySelector('middle')">中字型</a> <a href="javascript:void(0)" onclick="changeFontBySelector('min')">小字型</a> <div id="divNews">這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,這是一則新聞,</div> </body> </html>