headerRight.style.marginBottom 怎么去掉单位px

原创于 2023-07-21 09:32:24 发布 · 335 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

文章介绍了如何使用JavaScript的parseInt()函数来处理带有px单位的CSS样式属性，例如marginBottom，将字符串值转换为整数后，再拼接回px单位的字符串形式。

    <div class="t_header t_header_right" style="margin-bottom: 5px;">
        <span>用户</span>
    </div>

去掉单位"px"，可以使用JavaScript的字符串处理方法来实现。可以使用parseInt()函数将字符串转换为整数，然后再将其转换回字符串。以下是一个示例代码：

let headerRight = document.getElementsByClassName("t_header_right")[0];
let headerRightHeight = headerRight.offsetHeight;
let marginBottom = headerRight.style.marginBottom;
let marginBottomWithoutPx = parseInt(marginBottom) + "px";

在上述代码中，marginBottom是一个带有"px"单位的字符串，parseInt()函数将其转换为整数，然后再通过字符串拼接将其转换回带有"px"单位的字符串。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

WDY66886688

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用jQuery和CSS来去除像素单位（px）编程

DevGOOD的博客

09-25

222

然而，在某些情况下，我们可能需要以非像素单位来定义元素的样式。通过获取元素的CSS属性，并使用适当的转换函数，我们可以将像素值转换为其他非像素单位。除了像素单位（px），CSS还支持其他单位，如百分比（%），EM，REM等。现在，当页面加载完成时，元素的宽度将以非像素单位（例如，200px变为400）来呈现。首先，让我们看一个简单的示例，我们将使用jQuery和CSS来改变一个元素的宽度。在上述示例中，我们使用了像素单位（px）来定义元素的宽度为200像素。方法获取元素的宽度，并将其存储在变量。

jQuery获取的值去掉px

weixin_30618985的博客

01-17

454

jQuery中许多时候获取到的值都带有单位---px，这在进行加减计算的时候就会造成很大的问题。例如: 获取宽度：$("#smile").css('width'); 解决方法： var mywidth = parseInt($("#smile").css('width')); 不知道时很耽误事，知道了发现很Easy阿~！转载于:http...

参与评论您还未登录，请先登录后发表或查看评论

javascript 求div宽度时去掉px的超高效写法

cai555的专栏

04-28

3718

<html> <head> <style type="text/css"> div#mydiv { width: 100px; height: 100px; background-color: red; } </style> <script language="JavaScript"> fun

js字符串截取

honeyJ

09-30

1787

之前在获取元素属性时，踩了个坑，记录一下。用selenium做web自动化时，获取元素属性时，有时候会有单位，比如元素的宽高，得到的属性会是XXpx这样，但我只想要数字。就用了这样的函数将数字取了出来。 def get_num(original_data): num = re.sub("\D", "", original_data) return str(num) 没有考虑到的...

javascript控制css中style.width和style.height属性时单位px的问题

热门推荐

GreenOfBamboo的专栏

10-10

1万+

在MS的ie中，javascript控制css中style.width和style.height属性时单位px的问题：1、在读style.width时，返回px 如：alert(document.getElementById("DIV1").style.width) ---->output 100px2、在写style.width时，如：document.getElem

js获取不带单位的像素值

weixin_33729196的博客

07-20

372

所谓获取不带单位的像素值就是获取比如元素的宽度、高度、字体大小、外边距、内边距等值但是去掉像素单位。　　比如：某一个元素的宽度是100px，现在我要获取这个这个值但是不带单位“px”，对于这种问题你会怎么解决？我的解决办法是：　　比如通过点击某个按钮来获取该值，那么此时就应该写个函数，在点击按钮时再来调用该函数。　　function par（str）{　　　　var num ...

Warning: Unsupported style property margin-bottom. Did you mean marginBottom?

02-19

<div style={{ marginBottom: '10px' }}>Hello ``` --- ### **解决方法** 1. **直接修改属性名**：将 `margin-bottom` 改为 `marginBottom`，其他属性同理。 2. **使用外部 CSS 文件或 CSS Modules**： - 如果...

import { getAppliedHistoryArr, setAppliedHistoryArr, setUploadedImages, setCurrentAppliedColor, setCurrentAppliedImage, setColorImage } from './state.js'; import { switchToMode } from './mode-manager.js'; import { forcePickrSyncColor } from './color-mode.js'; // 添加历史记录项并渲染 export function addToAppliedHistory(item) { let arr = getAppliedHistoryArr(); arr = arr.filter(h => { if (item.id && h.id) return h.id !== item.id; if (item.color && h.color) return h.color !== item.color; return true; }); arr.unshift(item); if (arr.length > 10) arr = arr.slice(0, 10); setAppliedHistoryArr(arr); renderAppliedHistory(); } // 渲染历史记录到页面 export function renderAppliedHistory() { let arr = getAppliedHistoryArr(); const container = document.querySelector('.applied-history-container'); if (!container) return; container.innerHTML = ''; arr.slice(0, 10).forEach((item, idx) => { const div = document.createElement('div'); div.className = 'applied-history-block' + (idx === 0 ? ' active' : ''); div.style.cursor = 'pointer'; div.style.border = idx === 0 ? '3px solid #1746a2' : '1.5px solid #ccc'; div.style.marginBottom = '4px'; div.style.height = '48px'; div.style.borderRadius = '6px'; div.style.overflow = 'hidden'; if (item.url) { const img = document.createElement('img'); img.src = item.url; img.style.width = '100%'; img.style.height = '100%'; img.style.objectFit = 'cover'; div.appendChild(img); } else if (item.data && item.data.startsWith('data:image')) { const img = document.createElement('img'); img.src = item.data; img.style.width = '100%'; img.style.height = '100%'; img.style.objectFit = 'cover'; div.appendChild(img); } else if (item.color) { div.style.background = item.color; } div.onclick = function() { // 应用历史项 - 优先根据type属性判断 if (item.type === 'color' || item.color) { setColorImage(item); 这些代码应该放在vue里面的哪个结构中？

最新发布

07-24

在 Vue 项目中，将 JavaScript 函数和逻辑集成到合适的结构中，取决于所使用的 API 风格（选项式 API 或组合式 API）以及项目的整体架构。以下是一些常见的集成方式和最佳实践。 ### 3.1 在组件中使用 `setup` 函数...

androidlayout-marginBottom的值为负数.docx

01-23

在Android布局设计中，`android:layout_margin`属性用于设置View与周围元素的边距，包括`android:layout_marginTop`、`android:layout_marginBottom`、`android:layout_marginLeft`和`android:layout_marginRight`。...

CSS和JS标签style属性对照表(方便js开发的朋友).docx

01-13

修改元素的上边距为20像素，可以使用 `element.style.marginTop = "20px";`。同样，`padding` 属性和它的子属性 `padding-bottom`, `padding-left`, `padding-right`, `padding-top` 在JS中也区分大小写。 4. **...

js去除字符串指定符号和删除字符位数

湾流~ 的博客

02-25

1463

1.去除& * \ ! "符号 var a="[\"一级&市!政\",\"一级机*电\"]" var b=a.replace(/[&*\!"]/g,"") b=b.substr(0,b.length-1) // 删除字符串最后一位 b=b.substr(1) //删除字符串第一位 console.log(b); //一级市政,一级机电 ...

js像素运算问题

weixin_30781775的博客

12-15

471

通过DOM获取的某一距离属性（比如left）是带px单位的，直接对其算术运算不起效，要先把获取到的值处理一下去掉px单位。方法一（用处理字符串的方式去除px）： 1 var x=document.getElementById("a").style.left; 2 x=x.replace("px","")//过滤掉后面的px 3 x= Number(x)+1;//原基础上+1 4 d...

3.5【字符串处理】去除特定字符

bugnerH的博客

04-11

2070

str.strip() re.sub('[]',str) str.translate(string.maketrans('','')) u.translate({:})

Js中em与px的区别

laokdidiao的专栏

01-05

3608

欢迎大家收看我的在线Java全套免费教学超清视频： http://v.youku.com/v_show/id_XODQ1NjU0NDc2.html 这是其中的一个视频连接，大家可以拖动到优酷视频下方，订阅我的账号，因为以后我会有更多视频免费提供百度搜索：输入Fcs_D调的码农，或者输入"胡博君"就能看到我的很多视频或者加我的微信号：fcsboy 我可以及时通过微信通知你们 QQ学习群：237053693

js正则匹配去除空段落P标签

baiofchao

12-22

2814

<p style="margin: 22px 0px 0px; padding: 0px; font-size: 16px; line-height: 24px; color: rgb& #40;51, 51, 51& #41;; text-align: justify; font-family: arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; f