`
touchinsert
  • 浏览: 1329725 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

JS给元素添加样式

 
阅读更多

<style type="text/css">
div{ border:1px solid #ccc; width:200px; height:200px;}
.a{ background:#900;}
.b{ font-size:30px; font-weight:bold;}
</style>
<title>无标题页</title>
<script type="text/javascript">
function addClass(elements,value){ //addClass(元素,样式值)
if(!elements.className)
{
elements.className=value;
}
else
{
var newClass=elements.className;
newClass+=" ";
newClass+=value;
elements.className=newClass;

}
}
window.onload=function(){
var test=document.getElementById("test");
alert(test.className);
addClass(test,"a b");
}
</script>
</head>
<body>
<div id="test" class="m">hello</div>

分享到:
评论

相关推荐

    JS改变元素样式

    在JavaScript(JS)中改变元素样式是Web开发中常见的任务,它允许动态更新网页的外观和行为。通过JavaScript,我们可以响应用户的交互、响应数据变化或实现动态效果。本篇文章将详细探讨如何使用JavaScript来操作...

    javaScript给元素添加多个class的简洁实现_.docx

    在方法三的基础上,我们可以使用 JavaScript 的函数来推断性给元素添加样式。例如: ``` function addClass(element, csName) { if (!hasClass(element, csName)) { element.className += ' ' + csName; } } ...

    javaScript给元素添加多个class的简单实现.docx

    ### JavaScript给元素添加多个class的简洁实现 #### 概述 在Web开发中,通过JavaScript动态地为HTML元素添加或删除CSS类名是一项常见的需求。本文档将详细介绍如何使用JavaScript来给HTML元素添加多个class,并...

    js添加css样式小技巧

    在前端开发过程中,经常需要使用JavaScript动态地为网页元素添加或修改CSS样式。本文将详细介绍几种使用JavaScript添加CSS样式的技巧,并解释它们的工作原理及适用场景。 #### 一、使用`style`属性修改内联样式 **...

    通过js为元素添加多项样式,浏览器全兼容写法

    本文介绍了如何通过JavaScript为元素添加多项样式,并确保这种写法在所有主流浏览器中都能正常工作。 知识点一:使用cssText属性 在JavaScript中,可以通过元素的style对象的cssText属性来设置或获取元素的内联样式...

    javascript为节点设置样式

    除了直接修改样式属性,还可以通过添加或移除CSS类来改变元素的样式。`classList.add()`和`classList.remove()`方法分别用于添加和移除类。例如: ```javascript element.classList.add('highlight'); // 添加名...

    vue中v-for循环选中点击的元素并对该元素添加样式操作

    而v-for循环中实现选中点击的元素并对该元素添加样式是一项常见需求,它主要用于在用户交互中高亮显示特定的列表项或条目。例如,当用户点击一个列表项时,该项应该呈现出不同的颜色或样式,而其他列表项则保持原样...

    vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法

    在使用Vue.js框架进行前端开发时,经常会遇到需要根据用户的鼠标操作来动态地改变页面元素样式的需求。特别是在制作交互式UI时,鼠标移入移出元素时触发的样式变化是一个非常常见的操作。本文将详细介绍如何在Vue...

    js监听滚动条改变导航元素位置和样式.rar

    这个名为"js监听滚动条改变导航元素位置和样式.rar"的压缩包文件提供了一个实例,教你如何利用原生JavaScript来实现这一功能,特别适合初学者学习。以下是关于这个主题的详细讲解。 首先,我们需要理解滚动条事件。...

    通过js切换样式,3种样式选择

    在这个示例中,当用户点击对应的按钮时,JavaScript会将`&lt;body&gt;`元素的`class`属性设置为相应的样式类,从而切换整个页面的样式。 此外,为了更优雅的用户体验,我们可以考虑添加一些过渡动画效果。这可以通过CSS3...

    给before和after伪元素设置js效果的方法.docx

    给before和after伪元素设置...例如,我们可以使用JavaScript创建一个空的style元素,然后使用其innerHTML属性来添加样式规则。 给before和after伪元素设置js效果可以使用多种方法,选择哪种方法取决于具体情况和需求。

    JQuery为元素添加样式的实现方法

    本文将详细地介绍如何使用JQuery为元素添加样式的方法。 首先,使用JQuery为元素直接添加样式可以非常便捷地通过`.css()`方法实现。这个方法允许你获取和设置元素的CSS属性。例如,要设置`span`标签内的文字颜色为...

    jQuery给元素添加样式的方法详解

    在web开发中,给元素添加样式是一项基础而重要的任务。通过jQuery,我们可以非常方便地实现这一功能。接下来,我们将深入探讨如何使用jQuery来给HTML元素添加样式,以及相关的操作技巧。 首先,我们可以通过`.css()...

    每循环5条添加一个样式(JQ前端技术分享)

    在这个循环中,我们检查当前的索引是否能被5整除,如果可以,那么就为对应的元素添加样式。以下是一个使用jQuery的示例: ```javascript $(document).ready(function() { var data = [/* 你的数据数组 */]; // ...

    Javascript获取相同CSS样式的元素

    接下来,我们可以遍历这些元素并进行进一步的操作,比如改变它们的样式或者添加事件监听器: ```javascript redElements.forEach(element =&gt; { element.style.color = 'white'; // 改变文字颜色 element....

    HTML5实现可给任意元素添加魔幻效果的梦幻特效源码

    本主题中的“HTML5实现可给任意元素添加魔幻效果的梦幻特效源码”就是一个利用HTML5特性创建的动态特效示例。 这个特效的核心是通过JavaScript和CSS3来实现的。当用户将鼠标悬停在网页上的任何元素(如图片或文字)...

    JS样式封装

    这种做法常见于单页面应用程序(SPA)和响应式设计中,它允许我们在运行时动态改变或添加样式,为用户提供更丰富的交互体验。 在JavaScript中,我们可以使用DOM(Document Object Model)API来操作元素的样式。例如...

Global site tag (gtag.js) - Google Analytics