element.style

发布：2019-07-20 00:00:00 编辑：手机君来源：手机评站

描述：向您看到的图片效果一样，在源代码中我并没有添加左侧红线上部的style里的内容，而在右侧红线上却出现了element.style以及其内的内容，不知道是什么原因，是不是调用了js或者其它，但...

向您看到的图片效果一样，在源代码中我并没有添加左侧红线上部的style里的内容，而在右侧红线上却出现了element.style以及其内的内容，不知道是什么原因，是不是调用了js或者其它，但是我分开查找text-align以及right并测试，发现并没有因为我改变一些内容而发生改变，不知道是什么原因，希望有知道的大侠，告诉小弟一声。

如果html里确实没有写style，那么基本上就是js弄出来的了，在内部js和外部js都仔细检查下，看看哪里定义了修改一下就行了，如果实在是不会改js，那么最简单的办法就是把那个p标签换掉(比如换成span)

element.style相关话题

织梦网站element.style下的CSS样式该怎么查看？

我想把font-size: 16px;修改成18px为什么找不到位置呢？

element.style 这个是写在行内的样式，也就是在元素上，比如：

<h1 style=&39;font-size:16px&39;><h1>

像这样书写的。如果在那个标签元素上没有找到这样的样式，那就可能是js生成的。

如何修改element.style样式

我们在写前面 web样式的时候，会发现有些时候，我们怎么修改 style里面的值，页面上的样式都不会修改，当你用工具查看时，会发现里面会有 element.style的值，这个值还找不到是在哪里出现的，还修改不了。其实element.style是一种内联样式，很多情况下是在一些JavaScript代码里写死的，这种方法相当不好。但是有些时候，我们在使用第三方js文件时，会遇到。哪么我们如何去修改它呢，其实很简单。看下面这种情况，如果你在源代码，是看不到body后面跟一个style的，使用工具，你会发现它变成了下面这种突然给了一个 style[css] view plain copy</pre><pre name="code" class="html">这个是我正常的body标签 <body> 下面这个是通过查看元素看到的标签 <body style="overflow:hidde; height: 100%; border: none; margin: 0px; padding: 0px;" > 我使用firebug会看到，原来是这种内联样式。其实我们可以用!important来修改它我原来的body标签就是<body>只要加上<body style=&39;overflow:auto ! important;&39;>我这里要演示的就是让滚动条显示出来你再刷新一下，就会发现值变过来了

为什么代码无效

<!DOCTYPE html><html><body><script>function changeImage(){element=document.getElementById(&39;myimage&39;)if (element.style.match("width:100px;")) { element.style="width:200px;";}else { element.style="width:100px;"; }}</script><ul><li id="myimage" style="background-color:F00; width:100px; height:100px;" onClick="changeImage()"></li></ul></body></html>

展开

<!DOCTYPE html><html><body> <script> function changeImage() { var element = document.getElementById(&39;myimage&39;); if (element.style.width == "100px") { element.style.width = "200px"; } else { element.style.width = "100px"; } } </script> <ul> <li id="myimage" style="background-color:F00; width:100px; height:100px;" onclick="changeImage()"></li> </ul></body></html>

追问

可以问一下为什么我之前的代码没有效果吗。。

on write well和the element of style有什么区别

◆完全不同的两个词组啊：

on write well 关于写好

the element of style 风格的元素

js 点击li标签下的a 跳出对应的li标签div内容

<li><a href=&39; &39; class=open>浏览</a><div id=log class=review><div class=close><a href=&39; &39; class=close>Close</a></div><div class=text id=text>”texta1“</div></div></li><li><a href=&39;j &39; class=open>浏览</a><div id=log class=review><div class=close><a href=&39; &39; class=close>Close</a></div><div class=text id=text>”texta2”</div></div></li>怎么点击a标签的时候，自己跳出对应的弹窗<li>下的痰喘，js的代码是$(".open").on(&39;click&39;, function() {document.getElementById(&39;log&39;).style.display=&39;block&39;;document.getElementById(&39;fade&39;).style.display=&39;block&39;; });$(".close").on(&39;click&39;, function() {document.getElementById(&39;fade&39;).style.display=&39;none&39;;document.getElementById(&39;body&39;).style.overflow=&39;auto&39;;});})js怎么修改成对应的，现在不管点那个a标签第一个弹窗内容”texta1“

展开

$(".open").on(&39;click&39;, function () {var li = $(event.target).parent(&39;li&39;)alert(li.find(&39;div.text&39;).text())document.getElementById(&39;log&39;).style.display = &39;block&39;;document.getElementById(&39;fade&39;).style.display = &39;block&39;;return false});

html+java将div分页显示

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script>function showpage(page){for(var i=1;i<=3;i++) {if (page==i){document.getElementById("page"+page).style.display="block";} else {document.getElementById("page"+page).style.display="none";}}}</script></head><body> <div id="page1" style="display:block;">这是第1页的内容</div><div id="page2" style="display:none;">这是第2页的内容</div><div id="page3" style="display:none;">这是第3页的内容</div><a href="javascript:showpage(1);">第1页</a><a href="javascript:showpage(2);">第2页</a><a href="javascript:showpage(3);">第3页</a></body></html>为什么这个代码不能实现div分页显示

展开

你这样每次都是改变同一个元素的style，改成如果page等于i，就把i对应元素显示，如果不等于就把i对应元素隐藏。

JavaScript的doucument.getElementById().style.width的不起作用，请问是什么原因，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css"></style><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script type="text/javascript">function welcome(){alert(&39;hello&39;);alert(1);}function imagesize(){doucument.getElementById("o").style.height=doucument.body.clientHeight;}</script></head><body onload="welcome();imagesize()"><img id="o" src="sao/fate1.jpg" /></body></html>我想通过这个根据窗口改变图片大小，请问这是什么原因

展开

doucument.getElementById("o").style.height=doucument.body.clientHeight;

改为

document.getElementById("o").style.height=document.body.clientHeight+"px";

此外，要想让图片的高度等于body的高度，还必须设置body的高度，否则它默认是0的：

html,body {margin:0; width:100%; height:100%}

</style>

document.body.style.backgroundImage

展开

window.onload = function () {    document.body.onclick = function () {        var pic = this.style.backgroundImage;        if (pic.match(&39;bg1&39;) || !pic) {            pic = &39;url(./images/bg2.png)&39;;        } else {            pic = &39;url(./images/bg1.png);&39;        }    }}

这样试试看看行不行.

element.style.backgroundImage 是获取元素style属性的样式，例如

<p style=&39;font-size: 16&39; id=&39;p&39;></p><script>alert(document.getElementById(&39;p&39;).style.fontSize)</script>

获取css的方式是window.getComputedStyle

<p style=&39;font-size: 16&39; id=&39;p&39;></p><script> alert(window.getComputedStyle(document.getElementById(&39;p&39;)).fontSize)</script>

element 弹框里面怎么处理数组

通常会有需求，在关闭弹框后需要清空填写的数据，这时候就需要关闭事件了<el-dialog title="标题" :visible.sync="bind" size="small" @close=&39;closeDialog&39;></el-dialog>12在标签中加入@close=&39;closeDialog&39; mothods中加入//关闭弹框的事件closeDialog(){ this.xxx = &39;&39;;//清空数据},

求助getComputedStyle老是报错

<!DOCTYPE html><html><head><meta charset="utf-8" /><script> window.onload=function(){ var bd = document.getElementsByTagName("body"); var ul=document.getElementById("main").getElementsByTagName("ul"); for(var i=0;i<ul.length;i++){ var li=ul[i].getElementsByTagName(&39;li&39;); for(var j=0;j<li.length;j++){ var img = li[j].firstChild; li[j].onclick=function(){ if(getComputedStyle(li[j]).width == "370px"){ li[j].style.width = "100%"; li[j].style.position = "fixed"; li[j].style.zIndex = "1"; li[j].style.top = "0"; li[j].style.left = "0"; li[j].style.margin = "0"; li[j].style.height = "100%"; img.style.width = "1200px"; img.style.paddingLeft= "50%"; img.style.marginLeft= "-600px"; bd[0].style.overflow = "hidden"; }else{ li[j].style.position = "static"; li[j].style.zIndex = "0"; li[j].style.width = "370px"; li[j].style.height = "auto"; li[j].style.margin = "22px 14px"; img.style.width = "350px"; img.style.padding = "10px"; img.style.margin = "0"; bd[0].style.overflow = "auto"; } } } }}</script></head><body><div id="main"> <ul> <li><img src="41241.jpg" /><li> <li><img src="41241.jpg" /><li> <li><img src="41241.jpg" /><li> <li><img src="41241.jpg" /><li> </ul> <ul> <li><img src="41241.jpg" /><li> <li><img src="41241.jpg" /><li> <li><img src="41241.jpg" /><li> </ul></div></body></html>报错：1.html:15 Uncaught TypeError: Failed to execute &39;getComputedStyle&39; on &39;Window&39;: parameter 1 is not of type &39;Element&39;. at HTMLLIElement.li.(anonymous function).onclick (file:///C:/Users/WZH/Desktop/aiyun/1.html:15:8)li.(anonymous function).onclick @ 1.html:15只是实现点击li图片变大，再点击恢复原状

展开

代码规范有点糟糕哈…，我还是给你写一个功能函数吧。

给你写了一个功能函数

/* * 功能：获取渲染后标签的样式，element是标签的对象，property是标签样式属性值 * 参数：element是元素对象，property是样式属性 * demo：getStyle(move, "marginLeft"); * author：HTML5学堂 */function getStyle(element, property){    var proValue = null;    if (!document.defaultView) {        proValue = element.currentStyle[property];    } else {        proValue = document.defaultView.getComputedStyle(element)[property];    }    return proValue;}

来源: 手机评站