style中如何直接使用变量

最新推荐文章于 2024-07-08 09:31:39 发布

转载最新推荐文章于 2024-07-08 09:31:39 发布 · 5.9k 阅读

文章标签：

#javascript

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用JavaScript中的变量来动态替换HTML元素的样式属性值。具体操作为获取指定ID的DIV元素，并利用该变量更新其位置偏移量。

<DIV style="position:absolute;top:50px;left:100px;"></DIV>
上面的50px我要有一个已经存在并赋值的JS变量start代替，应该怎么写？

js在方法中写：
var div=document.getElementById("这个DIV的ID");//得到这个DIV。
div.style.top=start+'px'

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

agileclipse

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp-动态主题-使用动态scss变量切换主题

weixin_48429986的博客

11-13

1万+

先看效果以上是两种主题方案进入实现方法和讲解原理： <view class="dark-bg" :style="{'--text-color': color}"> // 注意这里的 text-color <view class="h2">测试组件</view> <view> <select-theme></select-theme> </view> <view

[面试题]Vue怎样在style里使用data中的变量？

有事儿私信。

02-25

1586

不管是面试官提问：Vue怎样在style里使用data中的变量，还是在实际开发中封装组件。在style里使用data中的变量，都是开发者必须掌握得一个技巧。

参与评论您还未登录，请先登录后发表或查看评论

uniapp 变量的种类与使用

weixin_38946164的博客

01-30

6665

一、uniapp 变量的种类变量按作用范围分为全局变量，页面级变量，函数级变量。全局变量作用于整个程序的各个页面，页面级变量只作用于一个页面，函数级变量只能在函数内部使用。二、uniapp 变量的使用 1. 全局变量的声明与使用 1-1、本地存储方式 1-2、globalData方式 2. 页面级变量声明与使用 2-1、先声明变量 2-2、使用变量 2-3、视图层变量，用在WXML 中的动态数据 3. 函数级变量声明与使用部分参考这篇文章 https://blog.youkuaiyun.com

uniapp全局引入scss变量，js可调用

qq_32687373的博客

06-08

4657

uniapp通过js全局引入scss变量

uni-app 在样式里设置变量值，现实样式值动态修改

qq_35761056的博客

12-01

4157

随后在data加入temp 变量。试了其他名称 tempss 好像也不起作用，只能使用 temp名称了。在样式里使用 var(变量名称) ，变量名称必须以 -- 开头，否则无效。如：var(--myfirst)变量名称和需要赋值的内容必须字符串包裹起来。如：temp: '--myfirst: 0px;最后一步需要在vue里面引入 temp 样式才会起作用。

UniApp 解决 style 绑定 css 变量，支持 var() 使用

最新发布

qq_36348403的博客

07-08

1271

这篇文章我们来讲讲vue是如何实现在style中使用script模块中的响应式变量

uniapp样式css用到变量

FUFCY的博客

05-27

3709

background:url(#{$imgUrl}launch_bg.png) no-repeat;

uni-app导航栏配置

dijijiao8242的博客

09-18

552

uni-app写app的内容会与沉浸栏重合在一起，写好好多，都是有点问题的，这次终于找到解决的方法了，与大家分享一下最简单的解决方式就是配置mainfest.json来关闭沉浸式。即通过打开应用的manifest.json文件，切换到代码视图，在app-plus -> statusbar 下添加immersed节点并设置值为false。 "app-plus"...

uniapp修改全局样式,定义全局变量

weixin_41780937的博客

12-04

7001

以上就是用全局变量去维护uniapp项目样式的方案。

uniapp微信小程序css获取胶囊样式作为变量

weixin_56743556的博客

07-19

1640

uniapp小程序端css获取胶囊样式作为变量使用

你不知道uni-app全局变量的几种实现方式

Wjhsmart的博客

05-07

3766

本篇博客记录了 uni-app 中全局变量的几种实现方式。

uniapp 通过变量动态改变CSS样式，样式的动态改变

qq_37455326的博客

01-28

2790

【代码】uniapp 通过变量动态改变CSS样式，样式的动态改变。

uniapp中布局style绑定js数据

weixin_44703147的博客

08-08

2030

vue 在style标签中引入js变量控制样式

lazy_tomato的博客

03-10

3359

START 如果希望元素的样式根据js代码去控制，常见的办法呢，是在元素的style属性绑定变量即可例如 <h3 :style="{ color: colorList[0] }">1.基本的绑定样式示例</h3> 详细用法可参考下面的博客： https://www.jianshu.com/p/2b82ee1e6199 但是如果style不满足需求，想在style标签中使用变量怎么办？开始安装插件css-vars-ponyfill npm i css-v

【uni-app】uni-app基础知识

wy233333的博客

03-31

1330

目录1.uni-app的初体验1.1 开发方式1.2 脚手架搭建项目1.3 搭建过程可能出现的问题2. 项目结构介绍2.1 项目目录 1.uni-app的初体验 1.1 开发方式使用 DCloud 公司提供的 HBuilderX 来快速开发使用脚手架来快速搭建和开发 1.2 脚手架搭建项目（这些命令都是可以执行的）全局安装 npm install -g @vue/cli 创建项...

vue style中使用less变量

09-15

在Vue项目中，如果要在style中使用less变量，可以通过以下步骤实现： 1. 首先安装插件style-resources-loader和vue-cli-plugin-style-resources-loader。可以使用npm命令进行安装： ``` npm i style-resources-loader vue-cli-plugin-style-resources-loader -D ``` 这个插件可以帮助我们在全局范围内共享样式变量。 2. 如果你的项目是使用vue-cli构建的，可以直接使用以下命令安装插件： ``` vue add style-resources-loader ``` 这个命令会自动将插件添加到项目中，并进行相应的配置。 3. 如果你的项目没有使用vue-cli构建，你可以手动进行配置。首先，在项目的vue.config.js文件中添加以下配置： ```javascript module.exports = { // ... pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [ // 这里添加你的less文件路径，可以是单个文件或者是一个文件夹 // 例如：path.resolve(__dirname, './src/styles/index.less') ] } } // ... } ``` 这样配置之后，你就可以在全局范围内使用less变量了。 4. 最后，确保你在需要使用less变量的组件的style标签中使用lang="less"，并且不需要再使用@import引入样式文件。例如： ```html <style lang="less"> .custom_text { padding-bottom: 50px; color: @primary-color; } </style> ``` 这样，你就可以在Vue的style中直接使用less变量了，而不需要每次都使用@import引入样式文件。