美文网首页
js控制iframe内部css样式

js控制iframe内部css样式

作者: de_self | 来源:发表于2018-11-07 19:47 被阅读13次

项目中需要对iframe引用的网页进行样式修改,使用js的元素查询功能进行操作,如图中希望对iframe中的ul高度进行操作
//通过contentWindow来查询iframe内部元素
如果是id选择器则值选中一个元素,直接可使用,若使用class等选择器选择的为多个元素,即使实际只有一个元素也需要遍历
此操作必须在window.onload = function(){}内进行


iframe
<body>
    <iframe src="1.html" id="aa"></iframe>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    window.onload = function(){
        var ifra = document.getElementById('aa');  //选中iframe   
        var test = ifra.contentWindow.document.getElementsByClassName('box');
        //通过contentWindow来查询iframe内部元素
        for(var i=0;i<test.length;i++){
           var tmp=test[i];
           console.log(tmp);
           tmp.style.height="20px";
        }
        
    }
</script>

相关文章

  • js控制iframe内部css样式

    项目中需要对iframe引用的网页进行样式修改,使用js的元素查询功能进行操作,如图中希望对iframe中的ul高...

  • js 向document注入css 的方法

    js 向document注入css 的方法应用场景:向iframe内的document注入css,覆盖原有样式; ...

  • 脚本化初识

    一、脚本化:用JS去控制css样式1、获取css样式(1)获取行内样式var style=div.stylesty...

  • JS语法

    一、CSS和JS在网页中的放置顺序是怎样的?js引入样式:1、内部js样式 alert(1); 2、引入外部js样...

  • js基础

    1.网页 网页=html+css+js html:网页元素内容 css:控制网页样式 js:操作网页内容,实现功能...

  • css变量详解

    css变量 css变量可以优雅的利用js控制css动画。改变传统通过js设置css样式的模式。使代码更加整洁。 v...

  • 聊聊JS控制css样式的几种方法

    JS控制css样式的几种方式 我们在js的工作学习中总会遇到一些不轻易通过style属性动态加载css样式的情况(...

  • JS总结

    原型 Tiips: 要学会让样式和行为分类也就是Js中不控制css,css中不控制js所以在js中千万不要用的ap...

  • js控制css样式

    cssText cssText的本质就是设置HTML元素的style属性值。 用法: 重置 我们一般通过js设置元...

  • 02 第二章-常用css和css规范

    一.css选择器 二.样式表 一 行间 样式 —-内部样式 二 内嵌 (css)样式 —-内部样式 三 外链 ( ...

网友评论

      本文标题:js控制iframe内部css样式

      本文链接:https://www.haomeiwen.com/subject/lxhbxqtx.html