js通過Object.style.property=new style;改變html樣式


HTML中的DOM(Document Object Model)文檔對象模型允許 JavaScript 改變 HTML元素和CSS樣式,//語法:Object.style.property=new style;其中Object是獲取的元素對象,如通過document.getElementById("id")獲取的元素。

e.g;改變 <div> 元素的樣式,將背景改為藍色、高度60px、顏色白色、大小18px、字體為宋體或雅黑,展示代碼如下:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>改變HTML樣式</title>
 6     </head>
 7     <body>
 8         <div id="ceshi">《朝花夕拾》原名《舊事重提》,是現代文學家魯迅的散文集,文集以記事為主,飽含着濃烈的抒情氣息,往往又夾以議論,做到了抒情、敘事和議論融為一體,優美和諧,朴實感人。作品富有詩情畫意,又不時穿插着幽默和諷喻;形象生動,格調明朗,有強烈的感染力...</div>
 9         <script type="text/javascript">
10             var myceshi=document.getElementById('ceshi');
11             myceshi.style.background='#0000FF';
12             myceshi.style.height='60px';
13             myceshi.style.color='white';
14             myceshi.style.fontSize='18px';
15             myceshi.style.fontFamily='arial microsoft yahei';
16             // myceshi.innerHTML='哥哥弟弟坡前坐,坡上卧着一只鵝,坡下流着一條河,哥哥說:寬寬的河,弟弟說:白白的鵝。鵝要過河,河要渡鵝。不知是鵝過河,還是河渡鵝哥哥弟弟坡前坐,坡上卧着一只鵝,坡下流着一條河,哥哥說:寬寬的河,弟弟說:白白的鵝。鵝要過河,河要渡鵝。不知是鵝過河,還是河渡鵝。'
17         </script>
18     </body>
19 </html>

 代碼中只是一小部分CSS樣式屬性,其它樣式也可以通過該方法設置和修改

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>style樣式</title>
 6 </head>
 7 <body>
 8   <h2 id="con">I love JavaScript</H2>
 9   <p> JavaScript使網頁顯示動態效果並實現與用戶交互功能。</p>
10   <script type="text/javascript">
11     var mychar= document.getElementById("con");
12     mychar.style.color="red";
13     mychar.style.backgroundColor="#ccc";
14     mychar.style.width="300px";
15   </script>
16 </body>
17 </html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM