Question

我有这个iframe：

<div onmousedown="alert()">
    <iframe id="PropertyCtrl" name="PropertyCtrl"  frameborder="0" style="border:thick solid #0000FF; cursor:w-resize;"></iframe>
</div>

我需要创建包装iframe的边框，当我在边框上导航并且必须触发点击onmousedown事件时。

如何创建onmousedown事件的边框？

Answer 1

只需在div上添加边框，就可以在iframe周围添加边框：

<div class="frame-border" ...>
   <iframe ... />
</div>

然后使用CSS：

.frame-border {
    border: thick solid #0000FF; /* Or whatever */
}

或者如果您更喜欢内联样式：

<div style="border: thick solid #0000FF" ...>
   <iframe ... />
</div>

Answer 2

请检查以下代码：

＆＃13;

function borderShow()
{
	document.getElementById('PropertyCtrl').style = 'border:thick solid #00FFFF;';
}

＆＃13;

<div onmousedown="borderShow()">
    <iframe id="PropertyCtrl" name="PropertyCtrl"  frameborder="0" style="border:thick solid #0000FF; cursor:w-resize;"></iframe>
</div>

＆＃13;

Answer 3

更改了该功能，以便可以重复使用。
它会在.off和.on类之间切换。
方法classList.add/remove用于操纵类。
将mousedown事件更改为普遍通用的点击。

段

function outlineTarget(tgt) {
  var target = document.querySelector(tgt);
  if (target.classList.contains('off')) {
    target.classList.add('on');
    target.classList.remove('off');
  } else {
    target.classList.add('off');
    target.classList.remove('on');
  }
}

#ctrl.off {
  border: 0 solid #0000FF;
  transition: all 1s ease-out;
}
#ctrl.on {
  border: 10px ridge #0000FF;
  border-radius: 12px;
  transition: all 1s ease-out;
}

<div onclick="outlineTarget('#ctrl')">
  <iframe id="ctrl" name="ctrl" class='off' src="http://example.com" frameborder="0"></iframe>
  <p>Click anywhere on this text or to the right of iframe</p>
</div>

如何创建包装iframe的边框？

3 个答案:

段