`

用JS改变TAG的样式

JavaScriptCSSHTMLXHTML 
阅读更多
js 代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3. <head>  
  4. <title>用JS改变HTML TAG的样式</title>  
  5. <style type="text/css">  
  6. .profitRed {  
  7.   background-color: Red;  
  8. }  
  9. .profitGreen {  
  10.   background-color: Green;  
  11. }  
  12. .profitOrange {  
  13.   background-color: Yellow;  
  14. }  
  15. </style>  
  16. <script language="javascript">  
  17. function changeStyle(o) {  
  18.   var objDest = document.getElementById('div_style');  
  19.   objDest.innerHTML = o.value;  
  20.   var v = parseFloat(o.value);  
  21.   if(v > 0) {  
  22.     objDest.className = 'profitGreen';  
  23.   }  
  24.   if(v == 0) {  
  25.     objDest.className = 'profitOrange';  
  26.   }  
  27.   if(v < 0) {  
  28.     objDest.className = 'profitRed';  
  29.   }  
  30. }  
  31. </script>  
  32. </head>  
  33. <body>  
  34. <div>  
  35.   数字:<input type="text" value="0" onblur="changeStyle(this);" />  
  36. </div>  
  37. <div id="div_style"></div>   
  38. </body>   
  39. </html>   
  40.   
分享到：
| 看了曹健"专业选手的失落与基本功之痛"的 ...
评论
发表评论

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

相关推荐

    自己收藏的精美 tag 标签样式

    本文将深入探讨如何使用JavaScript（JS）来调用和定制CSS样式，从而实现"自己收藏的精美tag标签样式"。 首先，让我们理解JS调用CSS样式的基本原理。JavaScript是一种强大的脚本语言，可以在网页运行时动态地改变...

    用js动态改变css样式表.pdf

    在JavaScript中动态改变CSS样式表是一种常见的前端技术，它允许我们根据用户行为或者特定条件更改网页的视觉表现。本文将详细解析如何通过JavaScript实现页面样式表的切换，并探讨相关的关键知识点。 首先，为了...

    js制作tag标签文字云特效.zip_authorwk3_js_tag_文字云_标签

    2. CSS样式控制：利用JavaScript改变元素的CSS样式，如字体大小、颜色、旋转角度等，以达到视觉上的层次感和动态效果。 3. 数据处理：首先需要一个包含标签数据的数组，然后根据每个标签的重要性（出现频率）来计算...

    antd-input-tag.zip

    2. **自定义样式**：Antd Input Tag支持自定义样式，通过CSS或者使用内联样式修改标签的外观，包括颜色、大小、边距等。此外，还可以通过props如`className`和`style`来调整组件的整体样式。 3. **禁用和读-only...

    JS制作TAG标签云文字动画特效特效代码

    JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页和网络应用开发，能够增强用户交互。在本文中，我们将深入探讨如何利用JS来创建一个动态的TAG标签云文字动画特效。这个特效允许用户在鼠标悬停时，使当前...

    前端项目-tagmanager.zip

    4. **自定义功能**：Tag Manager通常允许开发者进行高度定制，比如改变样式、设置事件处理函数、自定义验证规则等，以适应不同的项目需求。 5. **用户友好**：良好的用户界面设计，使得添加、删除或编辑标签直观...

    超给力的 TAG 标签切换

    综上所述，"超给力的TAG标签切换"项目涉及到了前端开发中的多项技术，包括HTML结构设计、CSS样式控制、JavaScript动态交互以及可能的动画效果。实现这一功能需要对前端技术有深入理解，并注重用户体验和代码质量。...

    tag-it.js基于jQuery输入框创建文字标签插件

    使用 CSS 可以对标签的样式进行定制，例如改变背景色、字体大小、边框等。此外，`tag-it.js` 还允许开发者扩展其功能，比如通过编写自定义插件或者使用插件提供的钩子函数来实现特定业务需求。 总的来说，`tag-it....

    js 可改变表格单元格大小

    在JavaScript（JS）中，实现可改变表格单元格（td）大小的功能，通常涉及到HTML、CSS和JavaScript的交互。在给定的标题“js 可改变表格单元格大小”和描述中，我们可以推断出这个功能是允许用户通过某种交互方式（如...

    JS制作TAG标签云文字动画特效.zip

    在这个"JS制作TAG标签云文字动画特效"项目中，我们主要探讨如何利用JS实现一种常见的网页元素——标签云，并为其添加动态效果。 标签云是网站上常见的一种展示关键词或标签的方式，它以不同大小的字体显示各个标签...

    tag标签特效 很好的

    在IT行业中，"tag标签"是一种常见的数据组织和展示方式，尤其在网站和应用程序中广泛使用。它们允许用户通过关键词快速浏览和分类内容，提高信息的可发现性和用户体验。"tag标签特效"则是指在显示tag标签时所采用的...

    jQuery多个tag标签选择添加特效.zip

    7. **错误处理**：如果用户输入的tag不符合规则，可以显示错误提示，通过CSS改变输入框或tag的样式以引起注意。 总的来说，这个压缩包提供了一个完整的jQuery tag管理系统，包括前端HTML结构、业务逻辑的JavaScript...

    html js改变字体写留言卡

    在这个“html js改变字体写留言卡”的项目中，我们将重点探讨如何使用JavaScript来实现一个具有编辑器功能的留言系统，特别是字体大小和字体类型的改变，以及插入表情的功能。 首先，我们需要创建一个HTML结构，这...

    layui用到的tag组件

    在JavaScript中，我们可以这样使用layui的tag组件： ```javascript layui.use('element', function(){ var element = layui.element; // 添加标签 element.tag('add', {title: '标签一'}); // 删除指定标签 ...

    display tag使用帮助

    7. **样式定制**：Display Tag允许自定义表格样式，通过CSS和`class`属性可以控制表格、行、单元格等元素的样式。 8. **条件渲染**：使用`decorator`属性，可以定义一个装饰器类，根据特定条件改变列的显示。 9. *...

    Javascript获取相同CSS样式的元素

    在Web开发中，JavaScript常常用于动态地改变页面样式，或者根据用户交互来调整元素的外观。这篇博文可能是提供了一种方法或技巧，帮助开发者高效地找到页面中具有特定CSS样式的元素。 首先，我们需要理解CSS（层叠...

    jQuery实现的输入框获得焦点时改变样式效果(默认是灰色).zip

    在IT行业中，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。这个"jQuery实现的输入框获得焦点时改变样式效果(默认是灰色).zip"文件包显然包含了实现一个特定功能的...

    js版标签云

    例如，我们可以根据标签出现的次数给它们分配一个权重值，然后用这个值来改变字体大小： ```javascript // 假设tags是已排序的标签数组，根据权重降序 const tags = ['标签1', '标签2', '标签3', ...]; // 计算...

    js设计标签云小事例

    JavaScript（简称JS）是一种轻量级的脚本语言，广泛应用于网页和互联网应用开发，而“标签云”（Tag Cloud）则是网站上一种常见的信息组织和展示方式。它通过将关键词或标签按照出现频率或者重要性以不同大小的字体...

    JS标签云实现选择功能

    5. **动画效果**：可以使用JavaScript库，如GSAP或Anime.js，为标签的大小变化添加更丰富的动画效果。 6. **响应式设计**：确保标签云在不同设备和屏幕尺寸上都能良好显示，可以利用CSS媒体查询或JavaScript动态...

Magicbox
Global site tag (gtag.js) - Google Analytics