开启左侧

[模板] 如何修改element.style内联样式(dz手机端修改为例)

[复制链接]
发表于 2018-4-13 13:14:04 | 显示全部楼层 |阅读模式
如何修改element.style内联样式;

我们在写前面 web页面样式的时候,会发现有些时候,我们怎么修改 style里面的值,页面上的样式都不会修改,当你用工具查看时,会发现里面会有 element.style的值,这个值还找不到是在哪里出现的,还修改不了。

如何修改element.style内联样式;

如何修改element.style内联样式;

其实element.style是一种内联样式,很多情况下是在一些JavaScript代码里写死的,这种方法相当不好。但是有些时候,我们在使用第三方js文件时,会遇到。哪么我们如何去修改它呢,在才源代码中   用!important 语法优先权来实现我们想要的效果。
如下例:
如下代码没有加上!important,页面显示的是100*100的色块,内部样式没生效。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>案例</title>
  6.         <style type="text/css">
  7.                 div{
  8.                         background-color: red;
  9.                         width: 50px;
  10.                         height: 50px;
  11.                 }
  12.         </style>
  13. </head>
  14. <body>
  15.         <div style="width: 100px;height: 100px;"></div>
  16. </body>
  17. </html>
复制代码





                               
登录/注册后可看大图
加上之后内联样式被内部样式替代了。也就达到不用修改原来代码的目的了,不过还是要说,尽量样式不要写在标签内。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>案例</title>
  6.         <style type="text/css">
  7.                 div{
  8.                         background-color: red;
  9.                         width: 50px !important;
  10.                         height: 50px !important;
  11.                 }
  12.         </style>
  13. </head>
  14. <body>
  15.         <div style="width: 100px;height: 100px;"></div>
  16. </body>
  17. </html>
复制代码


                               
登录/注册后可看大图

还有一种方法,使用js来实现的,获取元素,然后更改元素的样式,$("div").css("width":"50");用js这个方法不推荐,比较麻烦,还是用css好


举个例子:

默认情况下上面的图片透明是绿色,我们找不到element.style该怎么修改呢,这时候就可以在下面CSS样式表里面修改:

如上图,在css样式表里面加入一个opacity: 100  ! important ; ,可以看到的是最上面的opacity:0禁用,就是优先显示opacity:100。

实现操作:
平度论坛dz手机版模板注册验证码被遮挡了:
查出来被遮挡的插件

查出内联css文件
yaoqing_mobilex.class.php

修改其内联css
  1. return  '<div style="border:1px solid #ff0000; background: none repeat scroll 0 0 #ffff00;color:#ff0000; text-align: center;margin-top: 45px;">'.$mobiletip.$yq_robot['code'].'</div>';
复制代码



平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

 
QQ在线咨询
售前咨询热线
0532-88371356
售后服务微信
pingduwangzhan
快速回复 返回顶部 返回列表