动态切换style class--className

最新推荐文章于 2021-03-21 15:25:44 发布
最新推荐文章于 2021-03-21 15:25:44 发布
阅读量181 收藏
点赞数
分类专栏： CSS 文章标签： IE Firefox JavaScript ViewUI 

//firefox
dom.setAttribute("class", "leftPanel");

//IE
dom.className = "leftPanel";

/**
 *下面的方式在firefox和IE中都是不允许的，会报错。因为class是js保留关键字
 *className这个属性就是因为这个原因诞生的。
 **/
dom.class = "leftPanel";
iteye_9737
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
LESS 动态样式语言
08-15
LESS 一种动态样式语言
less入门
一捆铁树枝的博客
03-13 677
Less 的出现是为了解决 CSS 中过于呆板的写法。Less 官方文档中对 Less 的使用有详细的介绍，总结一下为：Less = 变量 + 混合 + 函数。 下面我就用实际案例来具体介绍less 首先，我介绍一下在webstorm中配置less文件自动生成css； 一、配置webstorm 1.使用 Npm 全局安装 Less $ npm install less -g 2.配...
react中使用className引入多个类样式
lulu_678的博客
03-13 2万+
今天在写代码的时候，发现一个问题：在一个标签里面已经有一个样式类，然后我还要添加一个样式类（此样式类是根据逻辑代码判断的） 首先来看下此需求： 一般给标签加样式类都是通过className设置属性 <div className='steps-action'> </div> 如果有多个属性值，则可以像下面这样，注意：多个样式类之间需要用空格隔开 <div...
React使用className引入多个类样式
qq_36742720的博客
01-04 1万+
在一个元素上设置样式，有一个固定的样式，然后还有一个使用三元运算符根据条件添加的样式。 比如说有一个固定样式"title": <div className="title">标题</div>， 然后还要一个点击高亮的样式: <div className={index === this.state.active ? "active" : null}>标题&l
less动态类名匹配
weixin_43842488的博客
05-11 4137
如果项目中有很多margin或者padding样式，并且值都不一样，那在less中定义公共的类名样式，再重复使用也很麻烦，这个时候写一个动态类名和动态的样式值就很好用。 less本身没有循环的语法，但是函数可以递归来调用，这样就可以模拟循环，用法如下。 .for(@i) when(@i <= 6) { //@i .for(@i + 1); //@i + 1 相当于"++i" .box@{i} { width:50px; height:50px;
javascript动态设置样式style实例分析
10-24
- 错误用法：许多人会尝试通过设置`element.class`来更改样式，实际上，正确的方式是使用`element.className`来切换或添加CSS类。 - CSS属性与JavaScript属性的对应：在CSS中，一些属性名称包含连字符（-），如`...
javascript-style-sheet
05-30
`element.classList.add('className')` 和 `element.classList.remove('className')` 是常用的类操作方法。 3. **CSS变量（CSS自定义属性）**：JavaScript可以与CSS自定义属性（变量）配合，动态设置全局或特定元素...
Vue主题切换源代码 vue-topic-switching
03-06
在“Vue主题切换”项目中，我们将探讨如何在Vue应用中实现主题的动态切换，为用户提供个性化的界面体验。这个项目的核心是利用CSS预处理器（如Sass或Less）以及Vue的特性来实现这一功能。 首先，我们要理解Vue应用...
react-一个自定义的ReactHook可帮助您实现黑暗主题的组件
08-14
然后，通过设置 `className` 或 `style` 根据 `isDarkMode` 值应用相应的主题。 ```css /* darkThemeStyles.js */ const darkThemeStyles = { backgroundColor: '#222', color: '#fff', }; /* lightThemeStyles....
js图片切换具体实现代码
10-21
总结来说，这个JavaScript图片切换功能通过监听`mouseover`事件，结合CSS样式和JavaScript代码实现了动态的图片展示效果。用户可以通过导航点选择要显示的图片，而图片会根据用户的操作自动切换。这种技术在现代网页...
react使用动态添加类名className和样式
ze1024的博客
08-15 1万+
一般我们实现css 的时候 会给一个class添加多个样式 比如 <div class="class1 class2">HELLO WORLD</div> 但是如果你在jsx文件里，通过import的形式引入的less，那么就不能这么写了，那么这时候想实现上面的效果怎么办，如下 React实现 双类名/多类名 方法一 // React实现 双类名/多类名 import styles from './styles.less'; // 常用 // （字符串写法） <div
Vue给标签动态绑定样式class或者style
sorrow_c的博客
07-02 8087
我的项目中实际使用的是vue+element ui :class :class等同于 v-bind:class 借用Vue官网的解释： <div v-bind:class="[active: isActive ]"></div> Vue官网使用时{}并不是[]但是在使用的时候发油编译器报错 本人刚接触前端，有不对的希望各位指正 上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 真值 你可以在对象中传入更多字段来动态切换多
JavaScript中的style和className
sinat_32017511的博客
01-16 4655
首先在这里提一下css的样式优先级，大家作为了解： ID 选择器， 如 #id{} 类选择器， 如 .class{} 属性选择器， 如 a[href="segmentfault.com"]{} 伪类选择器， 如 :hover{} 伪元素选择器， 如 ::before{} 标签选择器， 如 span{} 通配选择器， 如 *{} ...
React动态添加类名className和样式style
热门推荐
keep789的博客
04-24 2万+
一、React动态添加类名 已知变量：value = { class: 'class1', class2: 'class2', value: '你好' }，想得到结果如下： <div class="class1 class2">你好</div> 实现方式如下： // React实现 双类名/多类名 // 常用 // （字符串写法） <d...
less使用数组遍历（递归）动态生成class
codecat_yi的博客
03-21 2343
@colors : red blue; @colorsName : red , blue; @len : length(@colors); // wen条件判断 .each-color(@index) when (@index <= @len) { // 获取名称 @name : extract(@colorsName , @index); // 拼接.color-名称 .color-@{name}{ // extract从数组从取值
动态设置获取class类名方案
qq_39537116的博客
02-12 1652
对className增删替换切换的一些操作方法
weixin_30751947的博客
05-06 212
添加className 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 ...
<!DOCTYPE html> <html> <hand> <style> .out{ width: 1460px; height: 750px; border:1px solid #BFBFBF; margin: 20px auto; box-shadow:0px 0px 10px 5px #8e8c8c; } h1{ color:black; text-align: center; font-family: "字魂4086号-雅宋漂泊体"; font-size: 75px; } .slideshow-container { max-width: 1000px; position: relative; margin: auto; } .mySlides { display: none; } .prev,.next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover,.next:hover { background-color: rgba(0, 0, 0, 0.8); } .fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from { opacity: 0.4; } to { opacity: 1; } } </style> <script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides((slideIndex += n)); } function currentSlide(n) { showSlides((slideIndex = n)); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1; } if (n < 1) { slideIndex = slides.length; } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } </script> </hand> <body> <div class="out"> <h1>甘肃美食介绍</h1> <div class="slideshow-container"> <div class="mySlides fade"> <img src="1.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="2.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="3.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="4.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="5.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="6.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div> </div> </body> </html>这段代码为什么运行的时候没有轮播图？哪里有问题，正确的代码是怎样的？
最新发布
06-08
// 切换时间间隔为 3 秒 } function plusSlides(n) { showSlides((slideIndex += n)); } function currentSlide(n) { showSlides((slideIndex = n)); } <div class="out"> 甘肃美食介绍 <div class=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值