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

最近在学习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,而二三种比较便利,直接替换其中一个样式。

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

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. 关于iOS开发证书的一些总结(很有用)

    今天出了个问题,具体是这样的,我把本地的钥匙传里面的各种东西全部清空了,结果出现了各种不可预料到问题.花了一下午的时间反复的测试,终于把证书的一些问题理顺,然后在这里做一些总结. 先看张图片: 其中, ...

  2. SQL常用语句总结

    -------查询一个表有多少列select count(*) from sysobjects a join syscolumns bon a.id=b.idwhere a.name='XXX' -- ...

  3. 每天2分钟平板支撑Plank,锻炼核心肌群,远离背疼痛

    本文已转至  http://www.zhoujingen.cn/blog/2692.html 平板支撑(plank)被公认为训练核心肌群最有效的方法之一,每天坚持做可以让平坦的小腹重见天日.据说目前p ...

  4. NoSQL数据库的分布式算法&amp;&amp;memcache集群的实现

    NoSQL数据库的分布式算法  http://blog.nosqlfan.com/html/4139.html 一致性hash算法在memcache集群中的应用   http://alunblog.d ...

  5. 深入理解JVM—Java 6 JVM参数配置说明

    原文地址:http://yhjhappy234.blog.163.com/blog/static/316328322011119111014657/ 使用说明< xmlnamespace pre ...

  6. 3893: [Usaco2014 Dec]Cow Jog

    3893: [Usaco2014 Dec]Cow Jog Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 174  Solved: 87[Submit] ...

  7. Python struct模块

    有的时候需要用python处理二进制数据,比如,存取文件,socket操作时.这时候,可以使用python的struct模块来完成.可以用 struct来处理c语言中的结构体. struct模块中最重 ...

  8. ActiveMQ的安装与配置

    ActiveMQ的安装与配置详情 (1)ActiveMQ的简介 MQ: (message queue) ,消息队列,也就是用来处理消息的,(处理JMS的).主要用于大型企业内部或与企业之间的传递数据信 ...

  9. POJ2061 Subsequence 2017-05-25 19:49 83人阅读 评论(0) 收藏

    Subsequence Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14709   Accepted: 6210 Desc ...

  10. ASP.NET Core 中的框架级依赖注入

    https://tech.io/playgrounds/5040/framework-level-dependency-injection-with-asp-net-core 作者: Gunnar P ...