[CSS]使用JS改变元素位置,操作css比较困难时,可更换元素的类名
本人大菜鸟一枚,以此作为记录。
使用到技术栈jQuery。
开发中遇到某个元素需要在页面上切换 left: 0px 为 right: 0px 的需求,直接操作css会导致同时存在left和right属性,删除属性又不方便。
此时可以将元素切换前后的样式分别设定成两个class(如:left_a 及 right_a),通过 .removeClass(‘left_a’).addClass('right_a') 可实现需求。
[CSS]使用JS改变元素位置,操作css比较困难时,可更换元素的类名的更多相关文章
- Dojo初探之3:dojo的DOM操作、query操作和domConstruct元素位置操作(基于dojo1.11.2版本)
前言: 前面两章讲了dojo的基本规范和配置,当然这个配置不是必须的,当你有这需求的时候就可以用到dojo的config配置. dojo的所有js都是符合AMD规范进行异步加载的:http://blo ...
- 【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束
引言:2048小游戏的结束界面,使用纯CSS制作模态对话框,一般做模态对话框都会使用BootStrap自带的模态对话框组件方便使用,但在制作要运行在移动端的小项目时,就不能使用BootStrap,因为 ...
- 使用gulp进行css、js压缩
var gulp = require('gulp'); var cleanCSS = require('gulp-clean-css'); var concatCss = require('gulp- ...
- CSS vs. JS Animation: 哪个更快
CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且 ...
- 用css或js实现文本输入框的特效
1文本框默认点击特效: 点击文本框,外围会出现蓝色阴影,取消该特效,为该文本框添加css样式"outline:none;",就取消了默认特效. 2实现百度搜索框点击特效: 点击文本 ...
- jQuery操作css样式
jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...
- JQuery 加载 CSS、JS 文件
JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...
- CI框架引入外部css和js文件
首先在项目根目录下建立assets文件夹,在这个文件夹下再建立css和js文件夹分别放置css和js文件 然后,在项目根目录下建立.htaccess文件 内容如下: RewriteEngine on ...
- vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期
目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...
- JQuery处理DOM元素-属性操作
JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...
随机推荐
- MAC系统连接Windows共享文件的方法:
MAC系统连接Windows共享文件的方法: 1.首先先确认Windows系统下已开启共享.并且两台电脑之间局域网已通. 2.苹果MAC系统,点击桌面.打开顶部菜单 "前往". 3 ...
- 使用stream流对数据进行处理
1. 使用场景 本次使用是通过条件查询出所需要的多个字段后,对其进行处理(一个条件查询多个下拉框内容,并对每个下拉框内容封装对象,进行返回) 2. 代码 点击查看代码 //获取所有需要的数据 List ...
- TypeScript的super
(function(){ class Animal{ name:string; constructor(name:string){ this.name=name; } sayHello(){ cons ...
- html原声启动本地服务器,用http-server启动本地服务器
第一: 准备node.js环境: 打开cmd,输入:npm install http-server -g 第二: 安装 http-server npm install http-server -g 安 ...
- ADE-XL bsub提交超时
查找命令行log, Fatal server error: could not open default font 'fixed' 解决方案: yum install 'xorg-x11-font*'
- pandoc转换markdown生成pdf文件表格问题
使用pandoc转换Markdown文件(.md)生成pdf pandoc --latex-engine=xelatex -V CJKmainfont="Noto Sans CJK SC&q ...
- 如何添加Eclipse项目到SVN资源库
Eclipse项目添加到SVN版资源库有如下好处:一是轻松备份,每天做的修改内容一键提交:二方便合作,比较大的项目,多个人一起工作的时候,每人及时将完成的代码提交,别人可以下载浏览:三展示项目完成进度 ...
- 浅谈Atlassian产品搭建的敏捷管理体系(一)概述
准备把敏捷管理的专题在今年完成,主要谈一下Atlassian的实践,先做一下搬运工,讲去年写的两篇弄过来. Dream big, work smart, deliver fast 使用Atlassia ...
- (0403)位运算符+interface
1)interface 2)位运算符
- DPU02是一个高度集成的USB转UART的桥接控制器
DPU02是一个高度集成的USB转UART的桥接控制器,该产品提供了一个简单的解决方案,可将RS-232设计更新为USB设计,并简化PCB组件空间.该DPU02包括了一个USB 2.0全速功能控制器. ...