JS控制css float属性的用法经验总结

最新推荐文章于 2025-11-11 22:31:26 发布
转载 最新推荐文章于 2025-11-11 22:31:26 发布 · 99 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/zjx2011/p/4673712.html
文章标签：

#javascript #ViewUI

本文介绍了如何使用JavaScript来操作CSS属性。对于不包含中划线的CSS属性可以直接使用style.属性名；对于包含中划线的CSS属性则需将中划线替换为大写字母。此外还特别说明了'float'属性的特殊情况。

    • JavaScript与CSS属性的控制网上很常见，因此来说用js操作css属性是有一定规律的。

      1、对于没有中划线的css属性一般直接使用style.属性名即可。 
      如：obj.style.margin，obj.style.width，obj.style.left，obj.style.position等。

      2、对于含有中划线的css属性，将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。如：obj.style.marginTop，obj.style.borderLeftWidth，obj.style.zIndex，obj.style.fontFamily等。对在css中有一个特殊的属性，确实比较特殊，这个属性就是:float。我们不能直接使用obj.style.float来使用，因为这样是不起效的。

      正确的方法应为：(IE、Opera):obj.style.styleFloat，其他浏览器(Firefox):obj.style.cssFloat，喜欢这些经验能为同行提供一些参考。

转载于:https://www.cnblogs.com/zjx2011/p/4673712.html

badiu_30394251
关注
JS操作CSS中float属性的写法
AvskBug的博客
10-02 310
在CSS中，float属性用于控制元素的浮动效果。设置float属性为left或right可以使元素向左或向右浮动，而其他元素则会围绕着浮动元素进行排列。float属性常用于创建多栏布局、图像浮动和文字环绕效果等。
JavaScript中CSS属性float的特殊写法
ZdqDeveloper的博客
10-07 150
在JavaScript中，我们可以通过特殊的写法来修改和操作元素的。通过这些特殊写法，我们可以在JavaScript中灵活地控制元素的浮动位置，实现各种布局效果。这种方式使得我们可以在运行时动态地控制元素的浮动位置，从而实现更灵活的布局效果。通过上述示例代码，我们可以在JavaScript中使用特殊写法来修改和获取元素的。现在，我们来看一下在JavaScript中如何使用特殊写法来修改元素的。通过这种方式，我们可以直接在JavaScript中修改元素的。的特殊写法，并提供相应的源代码示例。
小程序中使用css var变量(使js可以动态设置css样式属性)
10-15
主要介绍了小程序中使用css var变量，使js可以动态设置css样式属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JavaScript教程：深入理解CSS float属性
最新发布
gitblog_00104的博客
11-11 336
`float`是CSS中一个历史悠久的布局属性，它最初设计用于实现简单的文本环绕效果，但后来被广泛用于创建多栏布局和其他复杂页面结构。这个属性虽然功能强大，但也有其独特的行为特性，需要开发者深入理解才能正确使用。 ## float的工作原理 `float`属性有四个可能的值： - `left` - 元素浮动到左侧 - `right` - 元素浮动到右侧 - `none` - 默认值，不浮动 -
js中设置css属性
yuyishui的博客
06-03 1186
JavaScript与CSS属性的控制网上很常见，因此来说用js操作css属性是有一定规律的。 1、对于没有中划线的css属性一般直接使用style.属性名即可。 如：obj.style.margin，obj.style.width，obj.style.left，obj.style.position等。 2、对于含有中划线的css属性，将每个中划线去掉并将每个中划线后的第一个字符换成大写即
使用js操作css属性的写法
软件哲学
08-24 1567
使用js操作css属性的写法：和css中的写法不同：  1、对于没有中划线的css属性一般直接使用style.属性名即可。 如：obj.style.margin，obj.style.width，obj.style.left，obj.style.position等。 2、对于含有中划线的css属性，将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。 如：obj.sty
CSS多浏览器兼容总结(个人经验)
12-04
可以使用CSS3的`border-radius`配合条件注释或JavaScript库，如jQuery的圆角插件，来实现跨浏览器的圆角效果。 10. **cursor:hand vs cursor:pointer**：`cursor:hand`在IE中表示手型指针，但在Firefox中应使用`...
HTML与CSS全面学习经验与实践总结
标题中提到的“Html与Css学习笔记以及经验总结”表明本资源主要是关于学习HTML和CSS的笔记和积累的个人经验。HTML（HyperText Markup Language）是用于创建网页和网络应用程序的标准标记语言，而CSS（Cascading ...
前端HTML与CSS核心知识总结
关键提示“子绝父相”——即子元素使用`position: absolute`时，父元素应设为`position: relative`，从而形成局部定位参照系，避免全局定位带来的混乱，这是CSS定位中最实用的经验法则之一。 最后，文档系统归纳了...
html、css、 javaScript面试技巧... 知识来源于互联网，只做归纳总结.zip
03-16
- 浮动与定位：掌握`float`、`position`（static、relative、absolute、fixed）的使用，以及清除浮动的方法。 - Flexbox和Grid：理解这两种现代布局模式，以及如何在不同场景下选择使用。 - CSS预处理器（如Sass...
如何在 React 项目中优雅地使用 CSS Modules
AI架构全栈开发实战笔记
07-15 426
本文旨在为React开发者提供一份全面的CSS Modules使用指南，涵盖从基础概念到高级技巧的完整知识体系。我们将重点讨论如何在React生态系统中有效利用CSS Modules解决样式冲突、提高代码可维护性等问题。文章将从CSS Modules的基本概念开始，逐步深入到配置、使用技巧和最佳实践。我们还将提供实际项目中的代码示例和常见问题的解决方案。：一种CSS文件编译方式，通过自动生成唯一类名实现样式隔离局部作用域：CSS类名只在当前模块中有效，不会影响其他组件组合(Composition)
js操作css属性值
hld_hepeng的专栏
02-20 1285
获取css样式表的属性： 1）ie下获取对应标签css样式表属性值 document.getElementById('id').currentStyle.属性名字; 2）Firefox下 window.getComputedStyle(document.getElementById('id').,null).属性名字;   使用js操作css属性的写法：和css中的写法不同： 1、对
JS DOM之操作CSS属性
大河之犬的博客
10-06 2722
使用style对象来设置一个CSS属性的值，其实就是在元素的style属性中添加样式，这种方式设置的是“行内样式”需要注意的是，这里的属性名使用的是“骆驼峰型”的CSS属性名。在JavaScript中，我们可以使用cssText属性来同时设置多个CSS属性。在JavaScript中，想要设置一个CSS属性的值，有两种方式可以实现。obj表示DOM对象，attr表示CSS属性名，采用的同样是“骆驼峰”型。语法：obj表示DOM对象，cssText的值是一个字符串。应该写成borderBottomWidth。
使用 JavaScript 动态设置 CSS 样式
moment159的博客
04-03 2631
在前端开发中，很多时候我们需要根据用户的操作、页面的状态或者其他动态因素来改变元素的样式。这时，使用 JavaScript 动态设置 CSS 样式就显得尤为重要。本教程将详细介绍如何使用 JavaScript 来动态改变元素的 CSS 样式。
js操作css float属性
zhouruitao的专栏
08-31 203
在写js操作css的过程中发现float属性在IE和firefox下对应的js脚本是不一样的，IE下对应得是styleFloat，firefox,chorme,safari下对应的是cssFloat，可用in运算符去检测style是否包含此属性。   下面是兼容性代码 LTFunction.setFloatStyle=function(obj,style) { var sty=obj....
JavaScript修改CSS属性的实例代码
weixin_30596735的博客
04-18 317
JavaScript修改CSS属性的实例代码 用原生的javascript修改CSS属性的方法。用JavaScript修改CSS属性 只有写原生的javascript了。1.用JS修改标签的 class 属性值：class 属性是在标签上引用样式表的方法之一，它的值是一个样式表的选择符，如果改变了 class 属性的值，标签所引用的样式表也...
js 添加css属性
weixin_34226706的博客
08-08 280
$(".active").css('border','1px solid #ddd')curLi.css('border','2px solid red')curLi.css('border-right','none')var company = document.getElementById('id_company');company.style.height = '23px';company....
JS--设置CSS
IT利刃出鞘的博客
07-24 1172
本文介绍用JS设置CSS的方法。
js操作css变量（属性）
全易
08-20 1132
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> :root { --bg: white; } .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值