---恢复内容开始---

最近在学习CSS/JS的样式，两个合学习一起学习，加深JS的书写和了解。

一、通过Javasript修改图片大小

通过函数来传递图片id，height，width，使用document.ElementByID来控制图片的大小，也就通过id 控制图片，之前有学过一句document.getElementByTagName('img')[0]，这里也可以通过这种方式来设定固定的图片。

在前一篇有写过如何写这个图片的样式，在图片的基础加上能够放大以及回放图片，先来看看这个的分段JS代码介绍

 　　　　　var status = true;//状态设置

 　　　　　　　　function changeSize(imge,height,width)

 　　　　　　　　　{

             var imgH =height; //获取图片的高度

                     var imgW =width; //获取图片的宽度

  　　　　　　　　　　　　if(status){

            //图片为正常状态,设置图片宽高为现在宽高的2倍

                   status = false;//把状态设为放大状态

                   document.getElementById(imge).height= imgH*2;

                   document.getElementById(imge).width= imgW*2;

                }else{

                    //图片为放大状态,设置图片宽高为现在宽高的二分之一

                    status = true;//把状态设为正常状态

                    document.getElementById(imge).height=imgH/2;

                    document.getElementById(imge).width= imgW/2;

             }

             changeStyle();//修改div样式的函数

         }

第一个函数changeSize为获取　id,width,height.在判断状态那里，status设置true为初始态，进入if,先将status 设置为放大状态，通过document.ElementById().height/width来控制图片缩放。

二、通过JS修改CSS样式

学习了四种如何修改CSS样式，第四种外联样式，因为我觉得较少使用所以就没有插入进来学习，其他三种都有放进来，同时学习了解。

 function changeStyle() {

             var obj = document.getElementById('change'); 

             if(status){

                   // obj.setAttribute("class", "polaroid");

                   // obj.style.width= "250px";

                   obj.style.cssText="width:250px;";

                }else{

                    // obj.setAttribute("class", "polaroid1");

                   // obj.style.width= "500px";

                   obj.style.cssText="width:500px;";

                }

         }

在上面展示的三种中，第一种要写两个CSS样式，因为它是直接替换掉一整个class，而二三种比较便利，直接替换其中一个样式。

事实上这两个函数是可以整合在一起的，但是为了方便了解那部分是什么作用，我在学习过程种就分开写了，但是写代码就要不断的优化。

附录完整代码

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>change photo</title>

     <style type="text/css">

         body

         {

             margin:30px;

             background-color: #E9E9E9;

             text-align: center;

         }

         div.polaroid

         {

             width:250px;

             padding:10px 10px 20px 10px;

             border:1px solid #BFBFBF;

             box-shadow: 2px 2px 3px #aaaaaa;

         }

         div.polaroid1

         {

             width:500px;

             padding:10px 10px 20px 10px;

             border:1px solid #BFBFBF;

             box-shadow: 2px 2px 3px #aaaaaa;

         }

     </style>

 </head>

 <body align="center">

     <div id="change" class="polaroid ">

         <img id="first" src="C:\Users\12078\Desktop\11.jpg" alt="" width="250px" height="200px"   onclick="changeSize(id,height,width);  ">

         <p >远方.</p>

     </div>

     <script type="text/javascript">

         var status = true;

         function changeSize(imge,height,width)

         {

             var imgH =height; //获取图片的高度

             var imgW =width; //获取图片的宽度

              if(status){

            //图片为正常状态,设置图片宽高为现在宽高的2倍

                   status = false;//把状态设为放大状态

                   document.getElementById(imge).height= imgH*2;

                   document.getElementById(imge).width= imgW*2;

                }else{

                    //图片为放大状态,设置图片宽高为现在宽高的二分之一

                    status = true;//把状态设为正常状态

                    document.getElementById(imge).height=imgH/2;

                    document.getElementById(imge).width= imgW/2;

             }

             changeStyle();

         }

         function changeStyle() {

             var obj = document.getElementById('change'); 

             if(status){

                   obj.style.cssText="width:250px;";

                }else{

                   obj.style.cssText="width:500px;";

                }

         }

     </script>

 </body>

 </html>

JS笔记一：动态修改css样式的更多相关文章

  1. ASP.NET中直接用C# 动态修改CSS样式

    ASP.NET中直接用C# 动态修改CSS样式  wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...

  2. 微信小程序通过js动态修改css样式的方法（交流QQ群：604788754）

    WXML <view class="page" style="background-color:{{pageBackgroundColor}}" > ...

  3. javascript 动态修改css样式方法汇总(四种方法)

    在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...

  4. javascript 动态修改css样式

    方法一:改变外联css文件,这里不讲这个. 方法二:通过改变claaName来改变样式,语法: obj.className = "style2"; //或者 obj.setAttr ...

  5. ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字

    有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS样式和JS. 如果是webform 开发,可以用下列方法: 流程是首先从数据中或者xml读取数据 ...

  6. ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字（转载）

    原文地址:http://www.cnblogs.com/xbhp/p/6392225.html 有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS ...

  7. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  8. 【JS新手教程】JS修改css样式的几种方法

    本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...

  9. 关于devexpress报表XtraReport，动态修改报表样式（.repx格式），动态添加数据并使用的理解

    一.基本概念: XtraReports 中的每个报表都由 XtraRepot 类的一个实例表示,或者由该类的子类来表示(这种情况更常见). 因此,每个报表都作为带区的容器使用,而每个带区中都包含报表控 ...

随机推荐

  1. [速成]了解一致性hash算法

    定义 一致性hash算法,在维基百科的定义是: Consistent hashing is a special kind of hashing such that when a hash table ...

  2. unittest模块的常用方法：

    unittest模块的常用方法: assertEqual(a, b)     a == b assertNotEqual(a, b)     a != b assertTrue(x)     bool ...

  3. Spring Task每次都会调用两次的问题

    最近一个Spring Mvc的项目中需要定时执行一个任务,所以使用了spring 自带的Task功能.本地调试的时候一切都正常,可是部署到服务器上后,每次任务都会被调用两次.在网上搜索了相关的问题,排 ...

  4. DOM知识梳理

    DOM 我们知道,JavaScript是由ECMAScript + DOM + BOM组成的.ECMAScript是JS中的一些语法,而BOM主要是浏览器对象(window)对象的一些相关知识的集合. ...

  5. Dom元素的Property和Attribute

    Attribute就是DOM节点自带的属性,例如html中常用的id.class.title.align等: 而Property是这个DOM元素作为对象,其附加的内容,例如childNodes.fir ...

  6. 使用Windows Server 2012+ 搭建VPN 简单 高效 稳定

    前几天,在机缘巧合之下,买到了一台性能配置一般的腾讯云服务器(香港的),因为性能比较差,没啥太大用途,就想着试试搭建一个VPN,后来,经过多次尝试和查资料,总结出了一套几乎100%成功的教程,现在拿来 ...

  7. 弹性盒模型 flex box

    弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项. 而因 ...

  8. Unslider Web前端框架之图片轮播

    前端框架,前端组件,前端库,都是一个意思,能看源码. 最近做H5小游戏,用到了图片轮播的组件,而且要求支持移动端触屏滑动.一开始用的是nivo slider,但是对大小不一样的图不支持box 的参数设 ...

  9. Deep Q-Network 学习笔记（二）—— Q-Learning与神经网络结合使用（有代码实现）

    参考资料: https://morvanzhou.github.io/ 非常感谢莫烦老师的教程 http://mnemstudio.org/path-finding-q-learning-tutori ...

  10. PC版模块滚动不显示滚动条效果

    以前对某个模块增加无滚动条的滚动效果,还需要找个插件才能实现,现在发现个简单方法,用普通的CSS就可以实现. 此方法只适用于不显示滚动条的滚动效果,如果需要自定义滚动条样式,还是需要插件来实现. HT ...