js修改元素内的CSS！

最新推荐文章于 2024-01-27 12:22:35 发布
最新推荐文章于 2024-01-27 12:22:35 发布
阅读量743 收藏
点赞数
文章标签： css input class function xhtml javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daonidedie/article/details/1932965
版权

 

from:http://xling.blueidea.com/archives/2007/5511.shtml


直接修改<style>里定义的CSS。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
}
.height {
 height:200px;
}
.width {
 width:200px;
}
.color{
 background-color:#CCCCCC;
}
-->
</style>
</head>

<body>
<hr />
Color:<br />
<input type="radio" name="radio" id="radio" value="#ff0000" οnclick="c(this)" />#ff0000
<input type="radio" name="radio" id="radio2" value="#ff00ff" οnclick="c(this)" />#ff00ff
<input type="radio" name="radio" id="radio3" value="#cc6600" οnclick="c(this)" />#cc6600
<input type="radio" name="radio" id="radio4" value="#000000" οnclick="c(this)" />#000000
<hr />
Width:
<input type="text" name="textfield" id="textfield" οninput="w(this)" onpropertychange="w(this)" />
Height:
<input type="text" name="textfield2" id="textfield2" οninput="h(this)" onpropertychange="h(this)" />
<table border="1">
  <tr>
    <td class="height width color"></td>
    <td class="height width color"></td>
    <td class="height width color"></td>
    <td class="height width color"></td>
    <td class="height width color"></td>
  </tr>
</table>
</body>
</html>
<script language="javascript" type="text/javascript">
var o;
var obj = document.styleSheets[0];
var rules = obj.rules || obj.cssRules;

var styleObj = {};
var selectorText,readonly,style,cssText;
for(var i=0;o=rules[i];i++){
 selectorText = o.selectorText;
 //readonly = new String(o.readOnly); IE
 //cssText = o.cssText; FF
 style = o.style;
 document.write(selectorText.fontcolor("#ff0000"),"<br />");
 styleObj[selectorText] = style;
}

function c(obj){
 if(obj.checked)
  styleObj[".color"].backgroundColor = obj.value;
}

function h(obj){
 try{
 styleObj[".height"].height = parseInt(obj.value) + "px";
 }catch(e){}
}

function w(obj){
 try{
 styleObj[".width"].width = parseInt(obj.value) + "px";
 }catch(e){}
}
</script>

 
生财
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过JS修改或读取元素的CSS样式
ChuanyangChen的博客
02-19 956
通过JS修改/读取元素的CSS样式 内联样式就是写在元素标签上的样式： <div style="width:500px;"></div> 样式表样式就是写在.css文件或在<style>...</style>标签里的样式： <style> div{ width:500px; } </style> 操作内联样式 语法： 在JS中 通过元素.style.样式名 = 样式值来修改元素的内联样式： ???? 例子： var box1 =
用JS改变的元素CSS样式
十方地藏
06-14 2万+
CSS样式的引用有3种方式：style引用、class引用、id引用，所以js改变元素的样式我们也分3种来说。1.js改变由style方式引用的样式：方法一：document.divs.style.cssText="border:1px solid #000000;color:#FF0000";方法二：document.divs.setAttribute("style","border:1px
javascript 改元素的CSS
尺树寸泓
08-09 765
1. document.getElementById(id).className=CSS属性名 2. document.getElementById(id).style.属性=值
JS给元素修改CSS样式
weixin_42681190的博客
01-27 175
使用document.getElementsByID 或者 ClassName 获取元素。chrome浏览器F12调好样式复制进去。 var docum = document.getElementsByClassName("元素Class"); docum.style.cssText = "background-color:black";
JavaScript 读取元素的CSS信息的代码
10-29
在前端开发中，JavaScript 和 CSS 的交互是不可或缺的一部分，尤其是在动态修改页面样式或获取元素的视觉状态时。本文将详细探讨如何使用 JavaScript 读取 HTML 元素的 CSS 信息，特别关注 W3C 标准和 Internet ...
html css js 3d元素周期表源码
05-10
标题中的“html css js 3d元素周期表源码”表明这是一个使用HTML、CSS和JavaScript技术构建的3D元素周期表项目。这个项目可能是一个互动的学习工具，通过三维视觉效果来展示化学元素的信息，帮助用户更好地理解和...
用js实现的抽象CSS圆角效果!!
10-30
例如，你可以创建一个JavaScript函数，该函数接受圆角半径作为参数，然后遍历顶部、主体和底部的子元素，动态地修改它们的CSS样式，如`height`、`margin`等，以适应新的圆角大小。 总的来说，这种用JavaScript实现...
JavaScript修改css样式style动态改变元素样式
12-01
需要注意的是： 注意大小写： javascript对大小写十分敏感，className不能够把“N”写成“n”，cssText也不能够把“T”写成“t”，否则无法实现效果。 调用方法： 如果改变className，则事先在样式表中申明类，但...
javascript 动态修改css样式方法汇总(四种方法)
11-23
在很多情况下，都需要对网页上元素的样式进行动态的修改。在JavaScript中提供几种方式动态的修改样式，下面将介绍方法的使用、效果、以及缺陷。 1、使用obj.className来修改样式表的类名。 2、使用obj.style.cssTest来修改嵌入式的css。 3、使用obj.className来修改样式表的类名。 4、使用更改外联的css文件，从而改变元素的css 下面是一段html代码和css代码用来解释上面方法的区别的。 CSS .style1{margin:10px auto ;background-color:#9999FF; display:block;color:Whit
移除html元素的某个css属性
10-12
我们想要移除html元素的某个css属性时，将属性赋值为空有时不能达到我们想要的效果
使用JS修改CSS的方法
明凯博客
07-09 1万+
1.js修改单个元素的css属性。 document.getElementById("obj").className="…"; document.getElementById("obj").style.backgroundColor="#003366"; 2.js修改整个页面的css属性。 link rel = "stylesheet" type="text/css" id="css" href="firefox.css" /> <span on click="javascript:docum
css 块元素 行内元素_CSS块元素修改器
编程故事的地方
11-23 457
css 块元素 行内元素 我们都有所有事物的名字-我们的猫，狗甚至是我们将要杀死的那头牛。 但是，为什么我们不命名CSS代码呢？ 可悲的是，如此多的程序员和开发人员往往没有命名他们正在使用CSS代码库。 这并不意味着他们的程序将无法运行，而是想像您正在开发的网站或软件之一在完成大量工作后在某个地方存在错误。 如果您没有命名代码，那么将很难调试它。 在这种情况下进行调试非常困难。 这是因为...
通过js修改css样式
最新发布
翱翔-蓝天
01-27 857
在使用这些方法时，重要的是要确保对DOM的操作在元素实际加载到页面之后进行，通常这可以通过将JavaScript代码放在。通过添加或删除CSS类来修改元素样式是一种更灵活的方法，尤其是当相同的样式需要应用于多个元素时。标签的底部或使用事件监听器来保证。这三种方法各有优缺点，选择哪种取决于你的具体需求和上下文。这种方法允许你动态地修改整个文档的CSS规则。它适用于需要动态调整大量样式规则的复杂场景。这是修改单个元素样式的最直接方式。JavaScript允许直接访问HTML元素的。
原生Javascript/原生JS修改CSS样式的四种方式
YunWisdom
05-09 6611
原生Javascript/原生JS修改CSS样式
js修改css样式的方法,js如何设置css样式？js修改css样式的方法
weixin_39861882的博客
08-03 8925
js如何设置css样式？本篇文章就给大家介绍js设置(修改)css样式的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。下面我们就给大家介绍使用javascript是如果设置css样式的。1、直接设置样式(内联样式)使用JavaScript设置元素样式的最简单方法是使用style属性。在我们通过JavaScript访问的每个HTML元素时都有一个 style对象。此对象允许我...
JS设置获取元素CSS样式的方法
热门推荐
吴小迪的博客
06-23 3万+
获取元素CSS样式的方法： element.style - - 获取行内（内联）样式表对象 window.getComputedStyle(element) - - 获取经过计算最后起作用的样式规则对象 - - 该方法在IE9之前的浏览器中有兼容问题 IE9之前浏览器使用 element.currentStyle 属性来获取经过计算起作用的样式规则 PS：element 表示待求解样式的 DO...
JS修改元素的样式
编程的旭哥哥的博客
11-02 7756
先看代码 &lt;html&gt; &lt;head&gt; &lt;style&gt; #a{ width:700px; height:300px; font-size:50px; color:red; background-color:grey; z-index:2; position:absolute; t...
通过JS修改CSS样式
Lanly-Li的博客
08-03 2万+
通过JS修改CSS样式有两种方法： 修改某一属性的值 修改某一元素的class名，使其被别的样式修饰 修改某一属性的值 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title&g...
js 修改css before伪元素
06-08
要修改 CSS 中的 ::before 伪元素，可以使用以下方法： ```javascript // 获取需要修改的元素 const element = document.querySelector('.example'); // 创建一个新的 <style> 元素 const style = document....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值