遇到问题：网页插入美洽页面，如何它的修改样式？

script 引入美洽页面

在开发者工具的 element 里，发现原来是 iframe 标签

我要实现的：（如下图：绿色框框部分）

1. 在页面上加左箭头用于返回上一页

2. 移动元素的位置

iframe 是层级最高的，而我现在要在这上面加一个箭头；

层级高肯定是设置的z-index大，所以首先我要修改原本iframe的z-index 的大小

这里我在 style 中，直接写

然后箭头直接写固定定位 z-index再大于0

iframe{z-index:-1!important;
}

然后就轻松的解决了！

但是当我要修改iframe 标签里的 class为 .title时，怎么写样式都没用了，根本没有找到 class="title" 的标签

以下是我的解决方案：

// 既然 css 找不到，那我就通过 javaScript去找// 然后就发现用 document.querySelector('.title')  找到的是 null，想着应该是dom元素并没有渲染好，于是就加了定时器，结果依旧是 null ?!// 最后使用 getElementsByTagName！！以下也是要写在定时器里的，为了确保速度和效率，可以写 setInterval ，如果找到的不为null 就清楚定时器document.getElementsByTagName("iframe")  // 这里会返回元素在文档中的顺序// 通过在控制台输出点开发现，我要找的是下标为1 的// contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档let one = document.getElementsByTagName("iframe")[0].contentDocument  // 获得 里面的 html了one.document.querySelector(".title").style.color="red"   // 此时就成功了

此方法用于解决，页面是引入的，html的结构你并不知道的情况，css 无法修改样式

遇到问题：网页插入美洽页面，如何它的修改样式？相关推荐

html实现点击部分页面跳转,打造营销服务闭环，在基木鱼如何利用美洽高效赋能客户...
目前,百度正在推广基木鱼建站,希望增加对广告主使用托管页的管控,提升内容安全营销的管理,也是为了更好的去优化推广效果,把握用户的搜索习惯,提升百度的推广核心力量. 今天我们就来聊聊在如何在基木鱼中更好 ...
web课程设计网页规划与设计~在线阅读小说网页共6个页面(HTML+CSS+JavaScript+Bootstrap)...
HTML期末大作业 ~ 大学生网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结课作业 ...
个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码
HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码作品介绍下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...
HTML5期末大作业：运动系列——NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码学生网页课程设计期末作业下载大学生网页设计制作成
HTML5期末大作业:运动系列--NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码学生网页课程设计期末作业下载大学生网页设计制作成临近期末 ...
HTML5期末大作业：商城网页设计——仿京东商城网页端模板(8页面) HTML+CSS+JavaScript...
HTML5期末大作业:商城网页设计--仿京东商城网页端模板(8页面) HTML+CSS+JavaScript 商城网页HTML代码学生网页课程设计期末作业下载商城大学生网页设计制作成临近期末, ...
HTML5期末大作业：商城网页设计——仿京东商城网页端模板(8页面) HTML+CSS+JavaScript
HTML5期末大作业:商城网页设计--仿京东商城网页端模板(8页面) HTML+CSS+JavaScript 商城网页HTML代码学生网页课程设计期末作业下载商城大学生网页设计制作成临近期末, ...
HTML期末大作业~ 学校招聘的HTML网页设计(7个页面) 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板
HTML期末大作业~ 学校招聘的HTML网页设计(7个页面) 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页制作临近期末, 你还在为HT ...
ThinkPHP内核仿美洽多商户多端接入无限客服系统-支持PC+WAP+公众号接入
介绍: 大部分站长都了解美洽系统,就跟这种类似的,可以实现一行代码接入客服,非常舒服,支持无限客服,无限坐席! 私有化源码部署,数据可控,稳定可靠.可自定义版权.logo.支持网页.微信公众号.小程序 ...
美洽客服系统怎么同步顾客身份
同步顾客身份如果你的产品有多种形式(网页.APP),且都使用了美洽,那么可以使用 _MEIQIA('clientId', '顾客的唯一标识') 来同步顾客的身份(包括顾客信息.聊天记录等). 「顾客 ...

遇到问题：网页插入美洽页面，如何它的修改样式？

遇到问题：网页插入美洽页面，如何它的修改样式？相关推荐

最新文章

热门文章