精华内容
下载资源
问答
  • 动态style
    千次阅读
    2020-12-23 00:08:51

    在uniapp里面显示一个有服务器返回来的公告,我需要对这个公告实现一个跑马灯式效果,但是动态填充的动画特效参数无效,现在就想问问,怎么样才能正确传入参数给css里面的keyframes,我在最下面用了三种办法,一种常规动态填充,但是无效不报错;一种写死数值,但是有效;另一种就是类似vue里面的写法,虽然在HBuilderX报错,但是在微信开发者工具里面是有效的;

    现在想问问,我到底要怎么写才能避免HbuilderX报错,又能让跑马灯效果实现出来?

    下述出现的 marqueeWidth这个变量是由JavaScript里面计算出来的, 主要代码如下:

    这是scss:

    .announcement-content {

    width:100%;

    overflow: hidden;

    .announcement-text {

    display: inline-block;

    white-space: nowrap;

    animation-name: around;

    animation-duration: 10s;

    /*过渡时间*/

    animation-iteration-count: infinite;

    animation-timing-function: linear;

    }

    }

    @keyframes around {

    from {

    margin-left: 100%;

    }

    to {

    /* var接受传入的变量 */

    margin-left: var(--marqueeWidth);

    }

    }

    这是template:

    {{announcement}}

    {{announcement}}

    {{announcement}}

    第三种办法报这个错误:

    style="--marqueeWidth:{{marqueeWidth}}em": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of

    , use
    .
    更多相关内容
  • vue 动态 style 计算 calc

    千次阅读 2022-04-02 10:58:34
    动态 style calc

    vue 动态 style 计算 calc

       :style="updateMrRight()"
    
        methods: {
        updateMrRight() {
        //动态设置 marginright 值
          let w = "1200px";
          let num = this.lineNum;
          return { marginRight: `calc(${w} / ${num} - 185px)` };
        },
      },
    

    展开全文
  • Vue前端实现动态style

    千次阅读 2021-08-13 16:19:48
    目前市场上Vue大受欢迎,最近在探索动态style,请各位大家赐教。 用法: 1、常规用法 vue元素中 :style="{‘styleName1’:value1,‘styleName2’:value2}" 例: // An highlighted block <el-button class=...

    在页面多态化的现在,前端动态样式已成为常态。
    目前市场上Vue大受欢迎,最近在探索动态style,请各位大家赐教。
    用法:

    1、常规用法

    vue元素中 :style="{‘styleName1’:value1,‘styleName2’:value2}"
    例:

    // An highlighted block
     <el-button class="dialog-button" :style="{'color': hitColor, 'border': borderColor(hitColor)}"></el-button>
    

    其中hitColor为当前对象颜色值,borderColor()为js方法

    borderColor(hitColor){
           return "1px solid"+ hitColor;
         }
    

    当然, 动态style(:style)中也可以使用常规的样式,不过格式需要改变下,需以英文逗号 , 分隔

    2、进阶用法

    在 :style中设置一个值

    <el-checkbox 
    :label="entityCode"       
    :style="{'--color': hitColor,'padding': '10px 0','font-weight': 'bold','color':item.hitColor}">
    <span>{{entityName}}</span>
    </el-checkbox>
    

    “- -color”为我们定义的变量名,那么在css中可以这样引用

    ::v-deep .el-checkbox {
           .el-checkbox__input.is-checked+.el-checkbox__label {
             color: var(--color);
           }
    
           .el-checkbox__input.is-checked .el-checkbox__inner,
           .el-checkbox__input.is-indeterminate .el-checkbox__inner {
             background-color: var(--color);
             border-color: var(--color)
          }
    }
    
    展开全文
  • vue动态style设置背景图片

    千次阅读 2022-05-09 16:18:25
    vue项目中,这里需要动态style设置背景图片 <div :style="{'background': data.avatar == ''? 'url(' + defaultImg + ')' :'url(' + data.avatar + ')', 'background-repeat':'no-repeat', 'background-...

    vue项目中,这里需要动态style设置背景图片

    <div 
      :style="{'background': data.avatar == ''? 
          'url(' + defaultImg + ')'
          :'url(' + data.avatar + ')',
          
          'background-repeat':'no-repeat',
          'background-size':'100%'
          }"
    ></div>
    
    展开全文
  • vue 动态style 拼接宽度

    千次阅读 2020-11-27 17:21:00
    大众用法: :style=" { width:30px } " 拼接宽度以及其他
  • vue动态style、动态伪类元素

    千次阅读 2020-08-07 14:20:53
    vue动态style和动态伪类元素 在css中使用“- -”为前缀定义变量, 使用var()函数来读取定义的css变量: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
  • vue中如何动态修改伪元素样式 vue项目中我们可以通过行内样式进行动态修改样式,大家都会就举栗子了 如何动态修改伪元素样式? 1.css中如何用变量 声明css变量的时候,变量名前面要加两根连词线(–)。...style> b
  • 动态样式style的背景图是由js采用ES6模板字符串拼接而来,无法显示背景,如下: // this.host:服务器地址 , imgUrl:图片路径 style.backgroundImage=`url(${this.host+imgUrl})` 当该参数当成 ing 的 src...
  • Javascript动态创建 style 节点互联网 发布时间:2008-10-17 19:25:03 作者:佚名 我要评论有很多提供动态创建 style 节点的方法,但是大多数都仅限于外部的 css 文件。如何能使用程序生成的字符串动态创建 style ...
  • angular4 的动态style之background-image

    千次阅读 2018-05-17 11:13:37
    参考angualr4之background-image的问题Style bindingYou can set inline styles with a style binding.Style binding syntax resembles property binding. Instead of an element property between brackets, start...
  • vue动态绑定style样式之动态添加style样式的多种写法
  • js动态添加style样式

    千次阅读 2021-12-14 16:56:20
    var style = document.createElement('style') style.type = 'text/css' style.appendChild(document.createTextNode('input[type="checkbox"]:checked {\n' + ' /* background-position: -48px 0; */\n' + ' ...
  • vue基础-动态style 目标: 给标签动态设置style的值 语法 :style="{css属性: 值}" <template> <div> <!-- :style="css属性:值" --> <button @click="one">点击变色01</button&...
  • vue中,动态绑定样式——动态绑定style写法 & 动态class写法 1、动态绑定style写法 注意: 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,...
  • 主要介绍了JavaScript动态添加style节点的方法,涉及javascript节点操作的相关技巧,需要的朋友可以参考下
  • Vue中动态绑定class和动态绑定style

    千次阅读 2022-05-20 14:28:27
    动态绑定class <template> <div class=""> <div :class="{ aa: isaa > 10 ? true : false }"></div> <button @click="fn">点击显示</button> </div> </...
  • vue之动态添加style样式的几种写法

    万次阅读 2021-12-09 10:12:59
    在长期维护的项目里面,尽量要...凡是有 - 的style属性名都要变成驼峰式,比如font-size要变成fontSize;除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff。
  • $("#eediv").attr("style","width: 200px;background-color: #1890FF;");
  • 本文实例讲述了javascript动态设置样式style的方法。分享给大家供大家参考。具体分析如下: 动态修改style 1.易错:修改元素的样式不是设置class属性,而是className属性. 2.易错:单独修改样式的属性使用”style.属性...
  • 动态绑定style写法

    千次阅读 2020-04-10 10:20:32
    :style=" [ {‘background’: ‘transparent’}, {‘box-shadow’:‘none’}, {‘border’:‘none’}, {‘position’:‘relative’} ]" 二 、三目运算符写法 1、三目运算符第一种写法 :style=“currentVipDataList....
  • <div class="reverse-imgdiv" v-bind:style="{ background: activeColor }" 在setup里面修改activeColor即可
  • uniapp动态设置style和class样式

    千次阅读 2021-11-12 18:39:11
    style样式设置 样式名称统一使用驼峰命名方式:例如:fontSize 对象方式 :style="{backgroundImage:`url(${itemB.images})`}" :style="{ paddingTop: paddingTopNum + 'px' }" 数组加三元运算方式 :class="[items....
  • 微信小程序动态绑定style样式

    千次阅读 2021-03-23 09:22:34
    微信小程序动态绑定style样式,homeOutObj.color是你js文件里面设置的颜色,可以根据用户操作改变值,达到动态渲染效果,如果样式比较复杂的话建议绑定动态class 传送门:绑定动态class
  • vue动态设置class、动态设置style

    千次阅读 2022-01-16 18:42:28
    //动态style对象 <div :style="{ color: bgColor, fontSize: '18px' }"></div> //动态class数组 <div :class="['is-active', isRed ? 'red' : '' ]"></div> //动态style数组 &l
  • 关于微信小程序style动态绑定问题

    千次阅读 2022-04-12 01:02:49
    view class="action border-custom" wx:if="{{isCustom}}" style="width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)"> <text class="icon-back" bindtap...
  • 28-vue基础:vue动态添加style样式

    千次阅读 2022-02-11 09:43:19
    vue基础:绑定属性class,绑定style
  • :style="{ 'border': is_gb == 0 ? 1 + 'px solid #f440' : 1 + 'px solid' + gbColor , 'color': is_gb== 0 ? '#f40' : gbColor }
  • Vue动态设置Style属性

    万次阅读 2020-03-19 16:28:22
    凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff 对象 ...
  • :style动态设置背景图片

    千次阅读 2022-03-20 20:39:49
    先定义状态,根据状态来判断应该展示哪张背景图片 claimed代表优惠券已领取的状态 unclaimed代表优惠券未领取的状态 ...设置背景图片的时候一定要注意引号的位置,不要多写、写错、少写;......
  • Vue中动态设置Style样式

    千次阅读 2021-05-24 10:30:56
    凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff      对象 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 326,177
精华内容 130,470
关键字:

动态style

友情链接: ARM_WINCE_tutorial.rar