zoukankan      html  css  js  c++  java
  • Knockout v3.4.0 中文版教程-14-控制文本内容和外观-style绑定

    5. style绑定

    目的
    style绑定用来给关联的DOM元素添加或移除一个或多个样式值。在如下情况很有用,比如,当某些值为负时,高亮显示,或者设置容器元素的宽度来匹配数值的改变。
    (注意:如果你不想应用一个显示的样式值而想用分配一个CSS类样式,请参考css绑定。)

    例子

    <div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">
       Profit Information
    </div>
     
    <script type="text/javascript">
        var viewModel = {
            currentProfit: ko.observable(150000) // Positive value, so initially black
        };
        viewModel.currentProfit(-50); // Causes the DIV's contents to go red
    </script>
    

    currentProfit 小于0时,元素的style.color属性会赋值red,大于0会赋值black
    参数

    • 主参数
      你应该传入一个javascript对象,其属性名对应样式名,值对应你想应用的样式值。
      你可以一次设置多个样式。比如,你的视图模型有个属性叫做isSevere

      ...

    如果你的参数引用是一个监控值,当监控对象值改变时会自动更新对应绑定。如果参数引用的不是监控值,则只会更新一次。

    通常,你可以使用任意的javascript表达式或函数作为参数值。KO会计算它们然后用它们的结果值来确定应该使用的样式值。

    • 额外参数

    注意:应用的样式名不是合法的javascript变量名
    如果你想应用一个font-weighttext-decoration样式,或者其他任意样式,而其名字不是符合javascript定义(因为包含了连字符),你应该使用样式的javascript名称,比如:

    • 不要写{ font-weight: someValue }; 应该写 { fontWeight: someValue }
    • 不要写 { text-decoration: someValue }; 应该写 { textDecoration: someValue }
      依赖
      除了核心KO库以外都不依赖
  • 相关阅读:
    原生JS(类、原型、构造函数)
    原生JS(cookie操作的封装)
    原生JS(cookie)
    原生JS(异步请求)
    原生js(1)
    iframe框架嵌套页面(全屏,页面上下左右有空白,去双滚动条)
    Zabbix4.0监控Nginx1.16
    Nginx1.16访问限制
    django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.3.
    Zabbix4.0解决中文乱码
  • 原文地址:https://www.cnblogs.com/DHclly/p/6755426.html
Copyright © 2011-2022 走看看