Question

我想知道如何获得相对单位价值例如，我有一个宽度为其视口宽度的80％的元素，我想用javascript获取宽度的值

console.log(Number.parseInt(document.getElementById('maxwidth').style.width));

<div id="maxwidth" style="width: 80vw;"></div>

Answer 1

替换此

Number.parseInt(document.getElementById('maxwidth').style.width);

带

Number.parseInt(document.getElementById('maxwidth').clientWidth);

＆＃13;

console.log(Number.parseInt(document.getElementById('maxwidth').clientWidth));

＆＃13;

<div id="maxwidth" style="width: 80vw;"></div>

＆＃13;

Answer 2

转换像素

中的

import React from 'react';
import { Provider } from 'mobx-react';
import { StyleProvider, Root } from 'native-base';
import { StackNavigator } from 'react-navigation';

import stores from './stores';
import screens from './screens';
import getTheme from './theme/components';
import DrawerWrapper from './components/Drawer';

const Navigator = StackNavigator(screens, {
  headerMode: 'none',
  initialRouteName: 'AuthBridge',
});

const App = () => (
  <StyleProvider style={getTheme()}>
    <Provider {...stores}>
      <Root>
        <DrawerWrapper
          child={<Navigator />}
        />
      </Root>
    </Provider>
  </StyleProvider>
);

export default App;

值

vw

e.g。如果您的视口为document.documentElement.clientWidth * vw / 100宽且您的元素为400px，那么它实际上是

80vw

并且应该在窗口的每个400 * 80vw / 100 = 320px事件中重新计算。

否则您可以使用resize

.getComputedStyle()

codepen demo

Answer 3

相对宽度

您应该自己计算元素的相对宽度，宽度（以百分比表示）。使用此功能即可。

function getRelativeWidth(element) {
  var offsetParent = element.offsetParent || element;
  return ((element.offsetWidth / offsetParent.offsetWidth) * 100).toFixed(3) + '%';
}

var element = document.getElementById('maxwidth')
console.log(getRelativeWidth(element))

<div id="maxwidth" style="width: 80vw;"></div>

offsetWidth

使用此函数可获取元素的宽度，包括其边框和填充。

function getOffsetHeight(element) {
  return element.offsetWidth
}

var element = document.getElementById('maxwidth')
console.log(getOffsetHeight(element))

<div id="maxwidth" style="width: 80vw;"></div>

clientWidth

使用此函数可以获取无内联元素的宽度，不包括其边框和边距，但包括其填充。

function getClientWidth(element){
    return element.clientWidth
}

var element = document.getElementById('maxwidth')
console.log(getClientWidth(element))

<div id="maxwidth" style="width: 80vw;"></div>

Answer 4

如果你想以非相对单位获得元素的宽度，你可以像这样使用getComputedStyle：

const style = window.getComputedStyle(document.getElementById("maxwidth"), null);
// style.width is your element's width expressed in pixels

获得相对单位价值

4 个答案:

相对宽度

offsetWidth

clientWidth