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

最近在学习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. GPU编程-Thread Hierarchy（3）

    1. 如果处理的数据是二维的或者三维的,应该怎么办呢? 针对的,我们可以按照二维或者三维的方式,组织线程.老规矩,先代码.后解释 // Kernel definition __global__ voi ...

  2. index.js:13 Uncaught TypeError: Cannot read property 'split' of undefined

    使用 webpack 编译 Vue 项目时出现报错: index.js:13 Uncaught TypeError: Cannot read property 'split' of undefined ...

  3. iOS项目评估报告

    1.整体项目无分层概念,结构混乱,代码耦合严重. 影响:后期扩展困难,维护困难. 解决方案:1.整体采用mvc模式. 2.在原来的基础再抽离出业务层 3.业务层按模块管理,合理分层分包. 4.做好共用 ...

  4. 什么时候该选用Xamarin?

    现在开发app也好,桌面程序也好,有很多不同的技术可以选择.那么,什么时候应该选用Xamarin呢? 5 questions to consider before choosing Xamarin 1 ...

  5. Promise，Async，await简介

    Promise 对象 转载:http://wiki.jikexueyuan.com/project/es6/promise.html 基本用法 ES6 原生提供了 Promise 对象.所谓 Prom ...

  6. Ubuntu下用cue文件对ape和wav文件自动分轨

    很多音乐CD的镜像文件都带cue格式的分轨文件,在Ubuntu Linux下可以通过一些工具来实现自动分轨. 一.Ubuntu下需要安装的工具有flac,shntool,libav-tools $ s ...

  7. springmvc环境下使用ajaxfileupload.js进行文件上传

    controller: /* #region */ @RequestMapping(produces = "text/html;charset=UTF-8", value = &q ...

  8. 摘抄自知乎的redis相关

    1.知乎日报的基础数据和统计信息是用 Redis 存储的,这使得请求的平均响应时间能在 10ms 以下.其他数据仍然需要存放在另外的地方,其实完全用 Redis 也是可行的,主要的考量是内存占用.就使 ...

  9. SQL 调用存储过程

    --1调用存储过程 exec 存储过程名 参数 --2当表使用 select a.*,b.* from tb b inner join ( select * from openrowset('sqlo ...

  10. 移动webAPP前端开发技巧汇总

    1. viewport:webapp视图 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是除去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动 ...