在iframe上单击更改样式属性

时间:2017-05-27 21:57:07

标签: javascript html css

我有这个iframe:

<iframe src="http://www.example.org" frameborder="0" style="top: -100; left: -250; width: 400; height: 590; border: 0; border:none;" scrolling="no" sandbox="allow-controls"></iframe>

我希望它自动更改 到:

<iframe src="http://www.example.org" frameborder="0" style="top: -200; left: -650; width: 950; height: 800; border: 0; border:none;" scrolling="no" sandbox="allow-controls"></iframe>
单击时

。确切地说,我想要更改topleftwidthheight属性。

有可能吗?如果是这样,怎么样?

2 个答案:

答案 0 :(得分:0)

Just Google“如何更改jquery中的样式”

提示:它使用docker exec -it <postgres-container-id> pg_dump db_name > local.dump.sql .click()

http://api.jquery.com/css/

https://api.jquery.com/click/

jquery change style of a div on click

答案 1 :(得分:0)

iframe不支持点击事件。你将不得不使用一些&#34;魔法&#34;实现它。基本上,您需要包装一个可以处理事件的容器以使其工作。实际上有一个jQuery插件可以帮助你。它位于:

https://github.com/vincepare/iframeTracker-jquery

以下是使用此插件更改iframe宽度的代码片段....希望它有所帮助。

<div class="iframetrack" id="iframe_red_1">
   <iframe id="theFrame" src="http://www.example.org" style="border: 0; 
      border:none; top: 100px; left: 100px; width: 500px; height: 250px;" 
      frameborder="0" scrolling="no" sandbox="allow-controls" >
   </iframe>
</div>

@section Scripts
{
<script>

    $(document).ready(function ($) {

        $('.iframetrack iframe').iframeTracker({

            blurCallback: function () {
                $('#theFrame').css('width', '200px');
            },
            overCallback: function (element) {
                this._overId = $(element).parents('.iframe_wrap').attr('id'); // Saving the iframe wrapper id
            },
            outCallback: function (element) {
                this._overId = null; // Reset hover iframe wrapper id
            },
            _overId: null
        });

    });

}