在HTML中的一个对象应用多个 class 名称 - 星云互动 - ITeye博客

`

zlpx

浏览: 156421 次
性别:
来自: 北京

最近访客更多访客>>

dragonsky_w

whatl

zhangbody

xy14qg

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

f308185993： 123123[size=xx-small][color=dar ...
在HTML的text input控件获取焦点时设置背景颜色
crackajack_zg： good ，很简单的代码、
用JQuery改变图片的透明度
qq184234675：求jquery1.9+的
用JQuery改变图片的透明度
demonzoo：很奇怪，我刚试了无数次，在本地直接打开就是无法弹出提示。后来我 ...
用HTML5产生操作系统通知
demonzoo：为什么我在chrome下无法显示通知内容，无论按哪个按钮都是弹 ...
用HTML5产生操作系统通知

在HTML中的一个对象应用多个 class 名称

博客分类：

HTML5

阅读更多

下面的例子展示了你如何应用多个CSS class名称给一个HTML对象。通过在HTML中设置class属性，或者在JavaScript设置className 属性。

<!DOCTYPE html>
<html>
<head>
    <title>Applying multiple class names to an object in HTML</title>
    <style type="text/css">
        .sty1 {
            font-size: 2em;
        }
        .sty2 {
            color: #f00;
        }
    </style>
</head>
<body>
 
    <div class="sty1">Big</div>
    <div class="sty2">Red</div>
    <div class="sty1 sty2">Big and red</div>
 
</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <title>Applying multiple class names to an object in HTML</title>
    <style type="text/css">
        .sty1 {
            font-size: 2em;
        }
        .sty2 {
            color: #f00;
        }
    </style>
</head>
<body onload="init();">
 
    <div id="div1">Big</div>
    <div id="div2">Red</div>
    <div id="div3">Big and red</div>
 
    <script type="text/javascript">
        function init() {
            document.get
            document.getElementById("div1").className = "sty1";
            document.getElementById("div2").className = "sty2";
            document.getElementById("div3").className = "sty1 sty2";
        }
    </script>
 
</body>
</html>

分享到：

用 JQuery隐藏内容 | 在HTML5中利用Canvas画图

2011-10-23 21:27
浏览 6151
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

基于PHP的FormBuilder 面向对象的PHPClass用于创建HTML表单.zip: 【标题】"基于PHP的FormBuilder 面向对象的PHPClass用于创建HTML表单" 涉及的核心知识点是PHP编程...在实际项目中，这种面向对象的表单构建器可以作为代码库的一部分，被多次复用，降低了开发成本并提升了开发速度。

超级有影响力霸气的Java面试题大全文档: 　对于客户机，EntityBean是一种持久性对象，它代表一个存储在持久性存储器中的实体的对象视图，或是一个由现有企业应用程序实现的实体。　Session Bean 还可以再细分为 Stateful Session Bean 与 Stateless ...

同一网页中Java小应用程序间的通讯.pdf: 在同一个网页中，可以包含多个小应用程序。为了实现它们之间的通信，每个`<APPLET>`标签需要设置`NAME`属性，赋予每个小应用程序一个唯一的实例名。在小应用程序的Java代码中，可以通过`getAppletContext()`方法...

HTML、CSS里面关于 id、class、name 属性的区别和用法.docx: 这使得我们可以对多个元素应用相同的样式，而无需重复编写相同的CSS规则。例如，可以创建一个`.button`类，然后将它应用到页面上的所有按钮元素上，统一它们的外观。在实际使用中，**id**应保持全局唯一，避免使用...

单选题[1]、一个网站中的多个网页之间是通过()联系起来的。【答案】B.pdf: 【网页间的联系】一个网站中的多个网页之间是通过超级链接（B）联系起来的。超级链接是网页设计中不可或缺的部分，它允许用户通过点击文本、图片或其他元素来跳转到不同的网页或位置，实现了网页之间的交互和导航。 ...

Vue 实现v-for循环的时候更改 class的样式名称: 在这个例子中，`calculate(index)`是我们在`methods`对象中定义的一个方法，它接受当前循环的索引`index`作为参数。方法内部可以计算或随机选择一个CSS类来返回。例如： ```javascript data() { return { ...

class_db_browse.rar_class_php dbgrid: 在Web编程中，数据库操作是不可或缺的一部分，而`Class DBGrid`是一个强大的工具，它能够帮助开发者更加便捷地处理和展示数据库中的数据。这个压缩包`class_db_browse.rar_class_php_dbgrid`包含了用于实现这一功能...

java后台部署html页面代码.docx: 静态模型是一个 JavaBean 对象，用于存储 HTML 页面的元数据，如创建日期、创建者、页面名称、页面大小等。在给定的代码中，我们可以看到使用了 Hibernate 框架来实现数据库交互。Hibernate 框架是一种 Java 持久...

HTML调用OCX控件: - `id`属性为控件提供一个唯一的名称，以便于在JavaScript中引用。 - `width`和`height`属性用于设置控件在页面上的尺寸。 2. `<embed>`标签： `<embed type="application/x-oleobject" classid="clsid:控件...

net学习笔记及其他代码应用: 声明方法的存在而不去实现它的类被叫做抽象类（abstract class），它用于要创建一个体现某些基本行为的类，并为该类声明方法，但不能在该类中实现该类的情况。不能创建abstract 类的实例。然而可以创建一个变量，其...

qtp 通过div 的class抓去 div的内容: 在自动化测试领域，QuickTest Professional（QTP）是一款广泛使用的功能测试工具，它能自动识别和操作各种应用程序的对象。然而，QTP在处理HTML元素时，其内置的对象模型可能不直接支持通过DOM元素的class属性来查找...

JS中的函数、事件和对象: 根据给定文件的信息，我们可以提炼出...JavaScript中的函数、事件和对象是其核心特性之一，掌握它们对于编写高效、功能丰富的网页应用程序至关重要。通过上述介绍，希望能够帮助读者更好地理解这些基本概念及其用法。

java class 13: 4. "天空网在线培训.url"：这个文件是一个快捷方式，可能指向一个在线的Java培训平台，提供了更多关于Java Class 13相关课程的详细学习资源，包括视频教程、练习题和论坛讨论等。综上所述，Java Class 13可能涵盖...

JAVAEE中Servlet实例Response与Request对象方法调用范例: 在实际应用中，我们通常会创建一个Servlet类，重写`doGet`或`doPost`方法来处理HTTP GET或POST请求。以下是一个简单的Servlet实例： ```java import javax.servlet.*; import javax.servlet.http.*; import java.io...

获取控件名称和内容.rar: 总结来说，获取控件名称和内容是软件开发和测试过程中的基础任务，涉及Windows应用、Web应用以及移动应用等多个领域。熟练掌握这项技能，可以帮助开发者更有效地调试代码，创建可靠的自动化测试，从而提高工作效率和...

Reusing_DHTML_example.zip_CHtmlScript class_DHTML_Reusing_DHT_ht: 标题中的"Reusing_DHTML_example.zip_CHtmlScript class_DHTML_Reusing_DHT_ht"表明这是一个关于重用DHTML（Dynamic HTML）技术的示例项目，其中可能涉及一个名为`CHtmlScript`的类。这个类可能被设计用来在网页环境...

详解angularJs中关于ng-class的三种使用方式说明: 实现方式通常是在控制器中定义一个变量，并将其值赋给相应的class名称。在HTML中，通过双大括号{{}}来绑定这个变量。例如： ```javascript function changeClass() { $scope.className = "change2"; } ``` ```html...

js基础之DOM中元素对象的属性方法详解: NodeList对象是一个节点的集合，通常由某些DOM查询返回，如节点列表，它不是数组，但在很多地方可以像数组那样操作。NodeList是动态的，这意味着在每次访问时，DOM都会重新计算NodeList，这可能导致性能问题。下面...

Global site tag (gtag.js) - Google Analytics