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

最近在学习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. Java经典编程题50道之十二

    企业发放的奖金根据利润提成:利润(I)低于或等于10万元时,奖金可提10%:利润高于10万元,低于20万元时,低于10万元的部分按10%提成, 高于10万元的部分 ,可提成7.5%:20万到40万之间 ...

  2. 初入计算机图形学（二）：对bidirectional path tracing的一些困惑

    本人水平有限,若有错误也请指正~ 前文提及了光线追踪的一些常用手法,但是其中path tracing的实现最为简单,但是其最致命的一个缺点就是图像收敛速度很慢..原因在于从摄影机发射出的每一条光线若不 ...

  3. Java阶段性测试--第四五六大题参考代码

    第四题:.此题要求用IO流完成 使用File类在D盘下创建目录myFiles, 并在myFiles目录下创建三个文件分别为:info1.txt, info2.txt, info3.txt . 代码: ...

  4. 关于XAMPP环境配置

     关于XAMPP软件 * Apache - 软件服务器(运行PHP) * 启动失败 * 原因 - 端口号被占用 * 错误信息 - Error: Apache shutdown unexpectedly ...

  5. 在.net下打造mongoDb基于官方驱动最新版本

    还是一如既往先把结构图放出来,上上个版本添加了redis的缓存,但是不满足我的需求,因为公司有项目要求是分布式所以呢,这里我就增加了mongoDb进行缓存分布式,好了先看结构图. 总的来说比较蛋疼,因 ...

  6. mysql之 MySQL 主从基于 GTID 复制原理概述

    一. 什么是GTID ( Global transaction identifiers ):MySQL-5.6.2开始支持,MySQL-5.6.10后完善,GTID 分成两部分,一部分是服务的UUid ...

  7. maven问题：org.springframewor.web.filter.CharacterEncodingFileter不能强转为javax.servlet.Filter

    使用maven搭建ssm(SpringMVC.Spring .Mybatis)项目,启动时报: java.lang.ClassCastException:org.springframewor.web. ...

  8. 【原】vue单文件组件互相通讯

    在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...

  9. php 可变函数

    //可变函数    function Test(){        $arr = func_get_args();       //获取所有参数 ,返回数组    $sum=0;     for($i ...

  10. vue2.0 配置 选项 属性 方法 事件 ——速查

    全局配置 silent  设置日志与警告  optionMergeStrategies   合并策略  devtools  配置是否允许vue-devtools  errorHandler    错误 ...