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

最近在学习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. 基于查表的整数霍夫变换方法实现（matlab）

    暂时先用matlab把算法弄一下,这是基于查表的整数霍夫变换方法实现及解释. 接着再实现FPGA的霍夫变换. 霍夫变换原理和算法这里不多说,可参考以下链接: http://blog.csdn.net/ ...

  2. java基础（十二章）

    一.变量的作用域(有效的使用范围) 1.变量有2种 1.1成员变量(属性) 声明在类的里面,方法的外面 1.2 局部变量 声明在方法里面或for循环结构中 2.调用时的注意事项(初始值不同.作用域不同 ...

  3. [BZOJ1597]土地购买

    Description 农夫John准备扩大他的农场,他正在考虑N (1 <= N <= 50,000) 块长方形的土地. 每块土地的长宽满足(1 <= 宽 <= 1,000, ...

  4. DOM事件类型总结大全

    unload:事件在用户退出页面时发生 window.onload = function(){ return "页面关闭!"; }; onblur:失去焦点发生变化 window. ...

  5. Python中的枚举

    在Python中想要实现枚举功能的方式比较多,可以通过字典这一数据结构,利用键与值的对应关系,可以实现枚举的功能. my_Enum={ 'red':1, 'yellow':2, 'blue':3 } ...

  6. WPF中带水印的Textbox

    很多时候我们都希望通过水印来告诉用户这里该填什么样格式的数据,那么我们就希望有这样的一个控件. 为了方便起见,先定义一个依赖属性专门来存放水印中显示的字符串. public sealed class ...

  7. ecshop和jQuery冲突

    这个问题看ecshop的论坛里有很多帖子,解决方案就好几种,但是有几个标注完美解决方案的需要更改很多文件,对于我们这种初学者出现了问题的话是不知道怎么调试的. 找到一个很简单的解决方案,论坛里说只能解 ...

  8. 【翻译Autofac的帮助文档】1.入门指南

    [写在前面]尝试做完一件工作之外自我觉得有意义的一件事,那就从翻译Autofac的帮助文档吧. 入门指南 将Autofac集成你的应用程序的步骤通常很简单,一般是: 时刻以IOC(控制反转)的思想来规 ...

  9. Android 设计模式实战之关于封装计费代码库的策略模式详谈

    写在之前 这周生活上出现了很多的不如意,从周一开始就觉得哪里出现了问题,然后就是各种烦躁的情绪,后来事情还真是如预感的那样发生了,很是心痛,但也无可奈何,希望大家都好好珍惜自己身边的人:友人,亲人,家 ...

  10. CentOS通过yum安装php7.0

    一.删除旧版本 如果已经安装过php就先删除之前的版本.检查方法如下: yum list installed | grep php 然后将安装的包进行删除 比如 yum remove php.x86_ ...