DOM对象操作CSS

最新推荐文章于 2022-10-26 01:48:28 发布
最新推荐文章于 2022-10-26 01:48:28 发布
阅读量293 收藏 1
点赞数
分类专栏： 前端 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pan_BY/article/details/101924446
版权
前端 同时被 2 个专栏收录
14 篇文章 0 订阅
订阅专栏
js
4 篇文章 0 订阅
订阅专栏

通过style对象改变节点的CSS
利用style对象来控制元素的css, 每个style对象对应为该元素指定的css, 而每个css属性—对应于style对象的属性。
对于单个单词的css属性，在style对象中的属性名称不变。
对于双单词或多单词的属性改写为骆驼写法。例如：css中的font-size对应style属性为fontSize.
使用className属性指定结点样式
结点的className属性对应于css中的类选择器。

<body>
    <!--
        DOM对象操作CSS
            对DOM的style属性设置
            样式名称和CSS中样式名称的区别
               去掉- 变为驼峰命名法就可以  值 "";
     -->
    <div id="mydiv" >

    </div>

    <input type="button" value="样式1" onclick="fun1()">
    <input type="button" value="样式2" onclick="fun2()">
    <input type="button" value="样式3" onclick="fun3()">

    <script type="text/javascript">
        var div = document.getElementById("mydiv");
        function fun1(){
            div.style.border="1px red solid";
            div.style.width="300px";
            div.style.height="300px";
        }

        function fun2(){
            div.style.backgroundColor="#0ff";
            div.style.width="400px";
            div.style.height="200px";
        }

        function fun3(){
            div.style.background="url(img/0.jpg) no-repeat 50% 50%";
            div.style.width="400px";
            div.style.height="200px";
        }

    </script>
</body>
向51致敬
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery Dom元素操作技巧
12-29
DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。 jquery 获取父节点，兄弟节点，在节点内插入内容。 ①$(#test1).parent() // 父节点 ②$(#test1).next() //下一个节点 ③$(#test1).append('...
dom对象操作Html,Css
Kangl的博客
12-14 173
HTML: 1、不要再文档加载完使用document.write,这样会创建新的dom对象，原来的元素将被覆盖。 2、获取元素，通过getElementbyID; getElementbyTag("p")(相同元素的第一个) 3、改变属性.getElementbyID('id').href="www.baidu.com";   CSS: 1. 语法document.getElement
js--5.dom对象-5.dom操作css样式
村西头的俏寡妇
01-28 939
1      操作内联样式 1.1  修改css样式值  通过JS修改元素的样式： 语法：元素.style.样式名= 样式值 注意： 1.如果CSS的样式名中含有-，这种名称在JS中是不合法的比如background-color， 需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写     2. 我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，
12.DOM操作样式
宋坚强大大~~
04-22 377
1.DOM对CSS的操作 - 读取和修改内联样式 - 使用style属性来操作元素的内联样式 - 读取内联样式： 语法：元素.style.样式名 - 例子： 元素.style.width 元素.style.height - 注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法 将-去掉，然后-后的字母改大写 - 比如：background-color...
JS：使用DOM操作CSS
F_aF_a的博客
12-30 390
通过JS修改元素的样式 语法: 元素.style.样式名 = “样式值” 注意：如果CSS样式值名含有-,这种名称在JS中不合法的，比如background-color,需要将它修改成驼峰命名法:backgroundColor 通过style属性读取和设置的样式都是内联样式，内联样式有较高的优先级 但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖样式 ...
DOM操作CSS样式设定
qq_45799465的博客
02-01 1035
标签对象.style.属性 = 属性值，只能获取行内样式 注意： JavaScript中 - 只作为减号使用。 css属性中带有 - 的属性 必须写成小驼峰命名法 font-size ---- fontSize margin-top ---- marginTop。 如果需要单位 必须要 携带单位 不能光写数字需要区分css样式和属性。 <style> *{ margin: 0; padding: 0; }
jQuery 中DOM 操作详解
12-09
jQuery 中的 DOM 操作 DOM(Document Object Model—文档对象模型)：一种与浏览器,平台, 语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件 DOM 操作的分类: ...CSS-DOM:针对于 CSS操作, 在 Ja
jQuery 中的 DOM 操作
11-23
DOM(Document Object Model—文档对象模型)：一种与浏览器,平台, 语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件 DOM 操作的分类: ...CSS-DOM:针对于 CSS操作, 在 JavaScript中, CSS-DO
PHP对象链式操作实现原理分析
12-19
在jQuery中,我们经常会这样的来操作DOM元素: $("p").css("color").addClass("selected"); 连贯操作看起来的确很酷，也非常的方便代码的阅读.那么在PHP里面是否可以实现呢？答案是肯定的,当然了必须是在OOP中用才行...
JavaScript DOM操作表格及样式
12-12
标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption...
CSS-DOM操作
weixin_34179968的博客
09-28 157
2019独角兽企业重金招聘Python工程师标准>>> ...
【css-dom操作】
a_shun66的博客
11-23 340
css-dom操作cssjquery获取样式js获取样式dom操作height() / width()offset() /offtop()offsetParent css jquery获取样式 /* jq的css方法 无论内部或者外部或者行内样式里面的属性都能获取 */ console.log( $('div').css('color')); js获取样式 /* 这个方法只能获取行内的样式 */ console.log(document.getElementsByTagName('div')[0].s
CSS相关的DOM操作
牧童
07-13 127
1.设置元素的float属性：由于float在javascript里面是关键字，因此，对于float的设置， 在Firefox,Chrome中，使用 [b]cssFloat[/b]代替，在IE 中，使用[b]styleFloat[/b]代替。 2.对于css属性中,用'-'连接的属性，如background-color等，在读写的时候，要求转化为驼峰写法， 如:background-co...
DOM css的一些操作
大树之殇的博客
06-30 646
1、查看滚动条的距离：        ie9以上及其它浏览器        window.pageXOffset / pageYOffset        ie8以及ie8以下        document.body.scrollLeft / top        document.documentElement.scrollLeftfunction getScrollOffset() { ...
Jquery中的DOM操作 (九.css-DOM操作)
妖怪的博客
03-07 481
css-dom技术就是读取和设置style对象的各种属性. 1.css()获取,设置,批量设置,元素的样式属性 $("p").css("color")//获取p元素的样式颜色 $("p").css("color","red"))//设置p元素的样式颜色 $("p").css({"fontSize":"30px","backgroundColor":"#888888"})//设置p元素的字体大小
DOM与CSS操作
u012246905的博客
11-13 613
 DOM 设置元素及内容 html()和text()方法 方法名 描述 html() 获取元素中HTML内容 html(value) 设置元素中HTML内容 text()
JavaScript操作DOM对象
weixin_30952103的博客
06-05 70
DOM：Document Object Model（文档对象模型），即文档对象模型，是基于文档编程的一套API接口。 使用JavaScript操作DOM时分为三个方面：DOMCore（核心）、HTML-DOM和CSS-DOM。 1、DOM Core DOM Core不是JavaScript的专属品，任何一种支持DOM的编程语言都可以使用它，它的用途仅限于处理一种使用标记语言编写出来的文...
使用Dom对象操作css样式--＞笔记
零小唬的博客
10-26 299
使用Dom对象操作css样式-->笔记
javascript要求将数组中的0项去掉，将不为0的值存入一个新的数组，生成新的数组
Pan_BY的博客
09-02 7313
<!-- 2.var arr = [4, 0, 7, 9, 0, 0, 2, 6, 0, 3, 1, 0]; 要求将数组中的0项去掉，将不为0的值存入一个新的数组，生成新的数组 --> <script type="text/javascript"> var num = 0; var arr = [4, 0, 7, 9, 0, 0, 2, 6, 0, 3, 1...
jquery 操作dom改变css
最新发布
05-25
使用 jQuery 操作 DOM 改变 CSS 的方法如下： 1. 选取需要改变 CSS 样式的元素，可以使用 jQuery 的选择器来选取元素。 2. 使用 `.css()` 方法来改变 CSS 样式，该方法接受两个参数，第一个参数是 CSS 属性名称，第...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值