Question

我通过这样的javascript使输入范围垂直：

jquery-clockpicker.min.js

jquery-clockpicker.min.css

但我无法将其置于创建的var range_pitch = document.createElement("input"); range_pitch.setAttribute("type", "range"); range_pitch.style.webkitTransform = "rotate(90deg)"; range_pitch.style.mozTransform = "rotate(90deg)"; range_pitch.style.oTransform = "rotate(90deg)"; range_pitch.style.msTransform = "rotate(90deg)"; range_pitch.style.transform = "rotate(90deg)";中（对我来说不起作用）：

<div>

这是 My fiddle

请问有什么解决方案吗？

Answer 1

<强> Fixed fiddle

在浏览器控制台中检查DOM，您可以看到input已经在div内，您应该调整CSS，请查看示例。

希望这有帮助。

＆＃13;

  var vertical_slider = document.createElement('div');
  vertical_slider.id = 'vertical_slider';

  var osa_y_panorama = 0.6;
  var range_pitch = document.createElement("input");
  range_pitch.setAttribute("type", "range");
  range_pitch.style.webkitTransform = "rotate(90deg)";
  range_pitch.style.mozTransform = "rotate(90deg)";
  range_pitch.style.oTransform = "rotate(90deg)";
  range_pitch.style.msTransform = "rotate(90deg)";
  range_pitch.style.transform = "rotate(90deg)";
  range_pitch.min = "0";
  range_pitch.max = "218";
  range_pitch.step = "0.6";
  range_pitch.defaultValue = osa_y_panorama;


  vertical_slider.appendChild( range_pitch );
  document.body.appendChild( vertical_slider );

＆＃13;

#vertical_slider
{
  float: left;
  width: 40px;
  height: 218px;
  border: 1px solid blue;
}

input{
  position: relative;
  top:93px;
  right: 83px;
  width:200px;
}

＆＃13;

Answer 2

问题来自你的css旋转到输入，如果你检查DOM，你的元素在里面，但旋转使它看起来在外面。

您可以使用此css进行热修复：

input {
  position: relative;
  right: 70px;
  top: 100px;
}

将输入定位在div内旋转90度

2 个答案: