一般情况下我们通过设置类名就可以改变元素的样式，但涉及到动画部分，就一定需要设置内联样式了，因此有了ms-css。*ms-css*的用法为ms-css-样式名="样式值"， 如ms-css-width=”prop”(会自动补px)，ms-css-height=”{{prop}}%”, ms-css-color=”prop”, ms-css-background-color=”prop”, ms-css-font-size=”{{prop}}px”。细细联想，ms-css与ms-class的旧风格、ms-data、ms-attr的用法相仿，属性名接第三个参数作为name，属性值作为value。

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <script src="avalon.js"></script>

        <script>

            var model = avalon.define({

                $id: "test",

                background: "red"

            })

            model.$watch("background", function(v) {

                model.background = v

            })

        </script>

    </head>

    <body>

        <div ms-controller="test">

            <div style="width:200px; height:50px" ms-css-background="background">

            </div>

            <select ms-duplex="background">

                <option value="red">红</option>

                <option value="yellow">黄</option>

                <option value="green">绿</option>

            </select>

        </div>

    </body>

</html>


<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script src="avalon.js" ></script>

        <script>

            var model = avalon.define({

                $id: "test",

                percent: 0

            })

            var a = true

            var id = setInterval(function() {

                if (a) {

                    if (model.percent < 100) {

                        model.percent++

                    } else {

                        a = false

                    }

                } else {

                    if (model.percent > 0) {

                        model.percent--

                    } else {

                        a = true

                    }

                }

            }, 100)

        </script>

        <style>

            .handerx{

                width:20px;

                height:20px;

                position: absolute;

                color:#fff;

                background: #000;

            }

            .sliderx{

                width:100%;

                height:20px;

                position: relative;

            }

            .body{

                padding:40px;

            }

        </style>

    </head>

    <body ms-controller="test" class="body">

        <div class="slider" style="background:red;">

            <div class="handerx" ms-css-left="{{percent}}%" >{{percent}}</div>

            <div style="background: greenyellow;height:20px" ms-css-width="{{percent}}%"></div>

        </div>

        <div class="sliderx" style="background:#d2d2d2;">

            <div style="background: #2FECDC;height:20px" ms-css-width="{{100-percent}}%"></div>

        </div>

    </body>

</html>


<!DOCTYPE html>

<html>

    <head>

        <title>ms-css</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <script src="../avalon.js" ></script>

        <script>

            var vm = avalon.define({

                $id: "test",

                w: 100,

                h: 100,

                click: function() {

                    vm.w = parseFloat(vm.w) + 10;

                    vm.h = parseFloat(vm.h) + 10;

                }

            })

        </script>

    </head>

    <body>

        <div ms-controller="test">

            <div style=" background: #a9ea00;" ms-css-width="w" ms-css-height="h"  ms-click="click"></div>

            <p>{{ w }} x {{ h }}</p>

            <p>W: <input type="text" ms-duplex="w" data-duplex-event="change"/></p>

            <p>H: <input type="text" ms-duplex="h" /></p>

        </div>

    </body>

</html>

ms-css已经在内部帮你处理好兼容问题，如opacity在旧式IE下用滤镜替换， tranform的私有前缀添加什么的。
最后要注意一点，属性值不能加入CSS hack与important!

迷你MVVM框架 avalonjs 学习教程10、样式操作的更多相关文章

  1. 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾

    avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...

  2. 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制

    在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...

  3. 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC

    大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...

  4. 迷你MVVM框架 avalonjs 学习教程1、引入avalon

    avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...

  5. 迷你MVVM框架 avalonjs 学习教程11、循环操作

    avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...

  6. 迷你MVVM框架 avalonjs 学习教程20、路由系统

    SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...

  7. 迷你MVVM框架 avalonjs 学习教程16、过滤器

    avalon的过滤器是参考自angular与rivets.它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式.下面是各大家的过滤器比较: rive ...

  8. 迷你MVVM框架 avalonjs 学习教程4、数据填充

    MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过unders ...

  9. 迷你MVVM框架 avalonjs 学习教程2、模块化、ViewModel、作用域

    一个项目是由许多人分工写的,因此必须要合理地拆散,于是有了模块化.体现在工作上,PM通常它这为某某版块,某某频道,某某页面.某一个模块,必须是包含其固有的数据,样式,HTML与处理逻辑.在jQuery ...

随机推荐

  1. C#中委托如何使用?(转帖)

    1.委托概述委托是C#中新加入的一个类型,可以把它想作一个和Class类似的一种类型,和使用类相似,使用一个委托时,需要两个步骤,首先你要定义一个委托,就像是定义一个类一样:然后,你可以创建一个或多个 ...

  2. Microsoft Dynamics CRM 2011 Plugin中PluginExecutionContext.InputParameters["Target"]中的Target是从哪来的？

    图 1 如图1,CRM编程是一个请求响应模型,任何操作都是通过一个Request发起,一个Response返回结果,这个模型简单实用.所有请求类都是继承OrganizationRequest,所有响应 ...

  3. linux $* $@ 特定位置参数

    举例说:脚本名称叫test.sh 入参三个: 1 2 3运行test.sh 1 2 3后$*为"1 2 3"(一起被引号包住)$@为"1" "2&qu ...

  4. java IO字符流

    字节流:因为内存中数据都是字节,二进制数据. 字符流:方便处理文本数据.字符流是基于字节流的. ascii 编码表,并且各国都有自己的编码表. unicode码表,世界码表.优化后 utf-8码表. ...

  5. PHP按最大宽高等比例缩放图片类 http://www.oschina.net/code/snippet_876708_21113

    PHP按最大宽高等比例缩放图片类 http://www.oschina.net/code/snippet_876708_21113 php 等比例缩小图片 http://www.111cn.net/p ...

  6. 关于android setTextSize() 以及 px dip/dp sp的说明。。。。

    Paint.setTextSize()单位为px,Android系统中,默认的单位是像素(px).也就是说,在没有明确说明的情况下,所有的大小设置都是以像素为单位.Paint.setTextSize传 ...

  7. JQuery基础（选择器、事件、DOM操作）

    一.选择器 1.基本选择器 ①id选择器       ②class选择器       ③标签名选择 ④并列选择          ⑤后代选择 代码用法展示: <title></tit ...

  8. Java-Runoob-高级教程-实例-数组：06. Java 实例 – 数组获取最大和最小值

    ylbtech-Java-Runoob-高级教程-实例-数组:06. Java 实例 – 数组获取最大和最小值 1.返回顶部 1. Java 实例 - 数组获取最大和最小值  Java 实例 以下实例 ...

  9. RBF神经网络和BP神经网络的关系

    作者:李瞬生链接:https://www.zhihu.com/question/44328472/answer/128973724来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  10. mysql更新(四) 数据类型

    07-数据类型   介绍 存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己的宽度,但宽度是可选的 详细参考链接:http://www.runoob.com/mysql/m ...