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

最近在学习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. Redis基本数据结构总结之STRING和LIST

    Redis基本数据结构总结前言 Redis的特点在于其读写速度特别快,因为是存储在内存中的,其非常适合于处理大数据量的情况:还有一个是其不同于其他的关系型数据库,Redis是非关系型数据库,也就是我们 ...

  2. 7.ReadWriteLock接口及其实现ReentrantReadWriteLock

    Java并发包的locks包里的锁基本上已经介绍得差不多了,ReentrantLock重入锁是个关键,在清楚的了解了同步器AQS的运行机制后,实际上再分析这些锁就会显得容易得多,这章节主讲另外一个重要 ...

  3. 热部署环境下，dubbo序列化的bug和优化

    一.问题的发现与解决 (1)     在热部署下,使用dubbo的序列化一个pojo对象,反序列化时报错:ClassNotFoundException. 最后发现原因是我们的框架选择使用了java序列 ...

  4. */美女镇楼/*>>>---PHP中的OOP-->面对过程与面对对象基础概念与内容--（封装、继承、多态）

      前  言  OOP  学习了好久的PHP,今天来总结一下PHP中的重要成员OOP 1  面向过程&面向对象 1.专注于解决一个问题的过程.面向过程的最大特点,是由一个一个的函数去解决处理这 ...

  5. 在Caffe添加Python layer详细步骤

    本文主要讨论的是在caffe中添加python layer的一般流程,自己设计的test_python_layer.py层只是起到演示作用,没有实际的功能. 1) Python layer 在caff ...

  6. JavaScript对象之document对象

    DOM对象之document对象 DOM对象:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. 打开网页后,首先 ...

  7. Java IO学习笔记总结

    Java IO学习笔记总结 前言 前面的八篇文章详细的讲述了Java IO的操作方法,文章列表如下 基本的文件操作 字符流和字节流的操作 InputStreamReader和OutputStreamW ...

  8. EF架构~codeFirst从初始化到数据库迁移

    一些介绍 CodeFirst是EntityFrameworks的一种开发模式,即代码优先,它以业务代码为主,通过代码来生成数据库,并且加上migration的强大数据表比对功能来生成数据库版本,让程序 ...

  9. 设置Ubuntu下adb 及 fastboot权限

    以普通用户登录linux,然后运行adb devices会提示权限不够: List of devices attached  ????????????    no permissions   这是因为 ...

  10. SVG制作简单的图形

    圆形 circle <svg width="200" height="200" > <circle cx="100" cy ...