zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    nodejs + typescirpt + vs code
    NodeJs使用nodejs-websocket + protobuf
    Windows10环境下使用VisualSVN server搭建SVN服务器
    微信小游戏下socket.io的使用
    JS中实现种子随机数
    帧同步和状态同步
    EgretPaper学习笔记一 (安装环境,新建项目)
    反编译微信小游戏
    微信小游戏 小程序跳转修改 不支持动态更新,只能在发布时修改
    HTML5实现本地JSON文件的读写
  • 原文地址:https://www.cnblogs.com/webaction/p/12510049.html
Copyright © 2011-2022 走看看