标签: inline-styles

我一定错过了关于z-index的一些东西.看看这段代码:

var span = document.createElement('span');
span.innerHTML = '<div style="background: none repeat scroll 0px 0px' +
    '#000000; opacity: 0.7; display: block; top: 0px; bottom: 0px; ' +
    'left: 0px; right: 0px; position: fixed; z-index: 1;"></div>';

span.innerHTML += '<div id="fancybox-wrap" style="opacity: 1; ' +
    'width: 420px; height: 200px; top: 467px; left: 481.5px; ' +
    'display: block; z-index: 2; ' +
    'border: 1px solid black;">Inside div</div>';
document.body.appendChild(span);

基于第二个div具有更高的z指数的事实,它应该在第一个div的顶部吗？

看看http://jsfiddle.net/qwertymk/TQSkX/看看我的意思

我在代码的前面计算 x 变量，我想在 div 的内联样式中插入该变量值，但它不起作用，尽管如果我插入像“100px”这样的常量，它会完美地工作。

var x;  
document.getElementById("block").style.position = "fixed";  
document.getElementById("block").style.left = x;  

注意：我想让它在不使用 jquery 的情况下工作，因为我在网站上只使用了几个脚本，在我的情况下链接一个大库是没有用的。

我正在使用 material-ui ReactJs 中的 Dialog 组件。

<Dialog fullScreen open={this.state.open}
  PaperProps={{ classes: {root: classes.dialogPaper} }}
  onClose={this.handleClose.bind(this)} transition={this.props.transition}>
  {this.props.children}
</Dialog>

在上面的代码中，我已经覆盖了 PaperProps 的根类。现在我还想覆盖 PaperProps 中的样式。在 PaperProps 中是否可以覆盖样式。

就像是 PaperProps={{ classes: {root: classes.dialogPaper}, style:{} }}

如果我错了，请告诉我。我也想覆盖样式。

我想使用useRef挂钩来更改DOM元素的样式：

const Box = props => {
  const box = useRef(0);

  const onClick = () => {
    box.current.backgroundColor = "blue";
  };

  return (
    <div>
      <div
        ref={box}
        style={{ width: "300px", height: "300px", backgroundColor: "red" }}
      />
      <button onClick={onClick}>Change color of box</button>
    </div>
  );
};

但是，如果单击按钮的backgroundColor，box则不会更改。

我还创建了一个简单的代码段，它说明了我的问题。