js内联外联样式的获取,父页面获取iframe框架元素返回null

简介: js内联外联样式的获取,父页面获取iframe框架元素返回null

js内联样式,外联样式

获取内联样式
//html部分
<li style = "width:15px;height:50px">
//js部分
var w = document.querySelector('li').style.width//只能获取行内样式
console.log(w);
// 15px
获取外部样式(css文件)
IE不能使用的方法
//html部分
<div>获取外部样式</div>
//css文件
div{
    width:150px;
    height:150px;
    background-color: pink;
}
//js部分
 var div = document.querySelector('div')
 var div_style = window.getComputedStyle(div)//获取div的style
 var div_w = div_style.width//获取div的宽度
 //150px
 var w = div.style.width
 console.log(w);//此时为''
IE能使用
//js部分
 var cssObj = di'v.currentStyle;
 console.log(cssObj.width);

父页面获取iframe框架元素返回null

原因:

iframe加载需要时间,为加载完成就在js中直接获取对象,则会返回null

解决方法

var i=document.getElementById("footer");//footer为iframe框架 id名
i.onload=function(){
  var footer_ul=i.contentWindow.document.getElementById("footer_ul")//footer_ul为iframe框架的对象
 }
相关文章
|
7天前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
22 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
5天前
|
Web App开发 JavaScript 前端开发
构建高效Web应用:Node.js与Express框架的深度整合
【9月更文挑战第28天】在现代Web开发领域,Node.js和Express框架的结合已成为打造高性能、易扩展应用的黄金组合。本文将深入探讨如何利用这一技术栈优化Web应用架构,提供具体实践指导,并分析其性能提升的内在机制。通过代码示例,我们将展示从基础搭建到高级功能的实现过程,旨在为开发者提供一条清晰的学习路径,以实现技术升级和项目效率的双重提升。
14 3
|
5天前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
12 2
|
7天前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
24 4
|
9天前
|
JavaScript 前端开发
常用的 JavaScript 框架和库
常用的 JavaScript 框架和库
13 6
|
9天前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
4天前
|
JavaScript 前端开发
JavaScript从二维数组抽取元素组成新数组的三种方法
JavaScript从二维数组抽取元素组成新数组的三种方法
|
4天前
|
JavaScript 前端开发
JavaScript从二维数组抽取若干元素组成新二维数组
JavaScript从二维数组抽取若干元素组成新二维数组
|
4天前
|
JSON JavaScript 前端开发
构建高效Web应用:Node.js与Express框架的完美结合
【9月更文挑战第28天】在现代Web开发中,Node.js和Express框架的结合为创建高性能、易扩展的应用提供了强有力的支持。本文将深入探讨如何利用这两种技术构建一个简单但功能强大的Web服务,同时提供代码示例以加深理解。
|
6天前
|
JavaScript 前端开发
用JavaScript编程定义二维数组并初始化,然后输出元素值
用JavaScript编程定义二维数组并初始化,然后输出元素值
下一篇
无影云桌面