关于js设置标签样式来显示图片背景无效的解决方案

本文介绍了一个使用JavaScript实现的Tab面板切换功能,通过修改DOM元素的样式来实现内容的切换显示。文章详细展示了HTML结构和JavaScript代码,并提供了解决方案以确保每个Tab都能正确显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在页面里使用了切换效果。背景图片的显示是通过js来设置标签样式来控制的。但是写了没有效果。只能显示第一个tab的。

html:



  1. <div class="col"> 
  2. <div class="zynav" id="JY"> 
  3. <div class="z1 curr1"><a href="javascript:;"><span>骑士</span></a></div> 
  4. <div class="z2"><a href="javascript:;""><span>魔法师</span></a></div> 
  5. <div class="z3"><a href="javascript:;"><span>治愈师</span></a></div> 
  6. </div> 
  7. <div id="NS" class="dzylist qs mfs zys"> 
  8. <div class="info"> 
  9. 姓名: 吉克<br />  
  10. 年纪: 16岁<br /> 
  11. 身高: 175 CM<br /> 
  12. 职业: 骑士 <br /> 
  13. <strong>【故事】</strong> 受到父亲的影响,而努力朝骑士之路前进的吉克,有着男 
  14. 孩子率性认真的个性,勇敢投入冒险。当发现父亲留下的一张纸条, 
  15. 记载着不为人知的魔法讯息,他便踏上了寻找谜团之路,因而也遇上 
  16. 艾儿一行人,发展出吵吵闹闹的情愫… <br /> 
  17. <br /> 
  18. <strong>【特性】</strong> 身为骑士的吉克拥有较高的体力和防御力,是队伍中的坦 
  19. 克和压制战况的重要角色。他能使用各种强力的连续技来牵制敌人, 
  20. 技能特性包括:将敌人击飞、晕击、反击、攻击倒地的敌人等等。 
  21. 除了一般挡住敌人的攻势之外,使敌人失去攻击的能力也是他的强项。 
  22. </div> 
  23. <div class="info" style="display:none;"> 
  24. 姓名: 丹恩<br />  
  25. 年纪: 18岁 <br /> 
  26. 身高: 180 CM<br /> 
  27. 职业: 魔法师 <br /> 
  28. <strong>【故事】</strong> 虽然年轻,却已是国家魔法师团精英,常被指派去执行棘手的任务。有着一头金红发色的丹恩,散发独特的贵气,加上太过俊俏的脸庞,常让他受到太多打扰,因此总是披着披风,低调的执行任务。被公主艾儿跟上,这回他恐怕很难太潇洒…<br /> 
  29. <br /> 
  30. <strong>【特性】</strong> 身为魔法师的丹恩,擅长使用冰、火、地三种元素魔法,加上可以使用快捷键实时回魔,施展不同效果的魔法,制造出强大的伤害。技能效果包含了:远距离、范围、定身、持续伤害等等,可从容因应各种战况,是不可或缺的主攻击角色。 
  31.   
  32. </div> 
  33. <div class="info" style="display:none;"> 
  34. 姓名: 艾儿 <br />  
  35. 年纪: 16岁 <br />  
  36. 身高: 165 CM<br />  
  37. 职业: 治愈师 <br />  
  38. <strong>【故事】</strong>  身为路尼亚王国的小公主,心地善良而单纯,虽然有时也会带点傲慢,想要表现自己的能力,却常常被拿跟姊姊莉儿公主比较,带着委屈和冒险的心情出走。离开了皇宫的艾儿,展现了她过人的治愈魔力,守护着众人的生命…<br />  
  39. <br />  
  40. <strong>【特性】</strong>  唯一拥有治愈能力的角色,拥有各种治愈技巧:单体、范围、复活、解状态等技能,搭配好用的技能「月之奉献」,可以将血量转换为魔力,让艾儿成为出名的打不死。魔法攻击虽然不强,却常带有击退的特性,非常适合辅助队友。在后期更是闯关不可或缺的重要职业 
  41. </div> 
  42. </div> 
  43. <div class="clear"></div> 
  44. </div> 
js: 

通过切换 骑士,魔法师 ,治愈师 来控制<div id="NS" class="dzylist qs mfs zys">的样式。显示左边的图片。结果只有默认的 骑士才能显示。


  1. <script language="javascript"
  2. var Browser = {  
  3.  isIE:(navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0),  
  4.  isFirefox:navigator.userAgent.indexOf('Firefox') >= 0,  
  5.  isOpera:navigator.userAgent.indexOf('Opera') >= 0  
  6. }  
  7.   
  8.  var jy={ 
  9.     S_obj:null
  10.     D_obj:null,   
  11.     Num:0, 
  12.     ay:Array("qs","mfs","zys"), 
  13.    init:function() 
  14.    { 
  15.        this.S_obj=$("JY"); 
  16.        this.D_obj=$("NS");  
  17.        this.AddEventList();              
  18.        this.DisplayControl(this.S_obj,this.D_obj,0); 
  19.    }, 
  20.    DisplayControl:function(_Sobj,_Dobj,num) 
  21.    {    
  22.          
  23.         var oldnum=jy.Num; 
  24.         var j=jy.Num+1; 
  25.         var k=num+1; 
  26.         _Dobj.childNodes[oldnum].style.display="none"
  27.         _Sobj.childNodes[oldnum].className="z"+j;         
  28.           
  29.         _Dobj.className="dzylist "+ jy.ay[num];            
  30.         _Dobj.childNodes[num].style.display="block"
  31.         _Sobj.childNodes[num].className="z"+k+" curr"+k; 
  32.         jy.Num=num;   
  33.    }, 
  34.    AddEventList:function() 
  35.    {           
  36.          
  37.        for(i=0;i<this.S_obj.childNodes.length;i++) 
  38.        { 
  39.          var _objEvent=this.S_obj.childNodes;          
  40.          if(Browser.isIE) 
  41.          {             
  42.             _objEvent.attachEvent("onclick",new Function("jy.DisplayControl(jy.S_obj,jy.D_obj,"+i+")"));             
  43.          } 
  44.          else 
  45.          {             
  46.              //_objEvent.attachEventListener("click",function(){var n=i;jy.DisplayControl(jy.S_obj,jy.D_obj,n)}); 
  47.              _objEvent.attachEventListener("click",new Function("jy.DisplayControl(jy.S_obj,jy.D_obj,"+i+")")); 
  48.          } 
  49.        } 
  50.    }  
  51.  }  
  52.  jy.init(); 
  53. </script> 

问过一些资深的js专员都没有很好的解决方案。当时也就是想试试延迟执行代码来测试一下,看能不能达到想要的效果。

最后结果与预期的想法刚好。解决了我在写js代码控制样式这个一直存在的问题。


看个js代码:

    DisplayControl:function(_Sobj,_Dobj,num)
   {   
        //alert(num);  //设置标签样式加载图片,会导致没有图片显示。 解决方案延迟执行js代码
         setTimeout(function(){  
        var oldnum=jy.Num;
        var j=jy.Num+1;
        var k=num+1;
        _Dobj.childNodes[oldnum].style.display="none";
        _Sobj.childNodes[oldnum].className="z"+j;        
         
        _Dobj.className="dzylist "+ jy.ay[num];           
        _Dobj.childNodes[num].style.display="block";
        _Sobj.childNodes[num].className="z"+k+" curr

       },13);

}

<think>好的,我现在需要帮助用户解决如何在Print.js设置打印样式的间距问题。首先,我需要回顾一下用户提供的引用内容,看看是否有相关的信息。 根据引用[4],用户提到在Vue中使用PrintJS时,边距设置调整后感觉对,但其他组件也没解决问题。这说明用户可能遇到了默认样式覆盖的问题。而引用[2]中提到,解决字体大小设置的问题是通过传入无效的font_size值来避免默认样式干扰。这可能暗示着类似的方法可以用于边距设置。 接下来,我需要考虑Print.js的配置选项。根据引用[3],使用jquery.print.js时,可以设置globalStyles和mediaPrint来控制样式的应用。可能PrintJS也有类似的参数,比如是否加载外部CSS或媒体查询。 用户的问题是关于边距,所以应该关注CSS中的margin属性。通常,打印样式可以通过@media print媒体查询来定义,但可能需要覆盖PrintJS的默认设置。例如,在打印样式中添加如下代码: @media print { @page { margin: 2cm; /* 调整页边距 */ } body { margin: 0; /* 确保内容区域无额外边距 */ } } 此外,PrintJS的配置中可能需要禁用默认样式,如设置css参数为空,并手动添加自定义样式。例如,在调用printJS时,传入style参数或引入自定义的CSS文件。 另外,引用[2]提到通过传入无效的font_size值来避免默认样式的影响,这可能适用于边距设置,但需要测试。或者,可以尝试在style参数中直接写入内联样式,使用!important覆盖原有设置。 总结步骤: 1. 使用@media print定义页边距。 2. 在PrintJS配置中禁用默认样式,如设置globalStyles为false。 3. 通过style参数或自定义CSS添加边距样式。 4. 检查是否其他CSS影响了打印区域,可能需要更具体的选择器或!important。 需要确保用户正确应用了这些步骤,并提供代码示例。同时,提醒用户注意浏览器默认的页边距设置可能影响效果,建议在打印预览中调整。</think>在Print.js设置打印样式的间距,可通过以下方法实现: ### 一、通过CSS媒体查询设置页边距 在全局CSS中添加: ```css @media print { @page { margin: 2cm; /* 上下左右统一间距 */ margin-top: 3cm; /* 单独设置顶部间距 */ } body { margin: 0 !important; /* 消除默认边距 */ } .print-area { padding: 20px; /* 内容区域间距 */ } } ``` ### 二、Print.js配置参数调整 ```javascript printJS({ printable: 'elementId', type: 'html', css: '', // 禁用默认CSS加载 style: '@page { margin: 2cm; } .content { padding: 15mm; }', // 直接注入样式 scanStyles: false, // 关闭自动扫描样式 font_size: 'invalidValue', // 规避默认字体限制[^2] honorMarginPadding: true // 启用边距继承 }); ``` ### 三、注意事项 1. 使用`!important`覆盖默认样式: ```css @media print { .custom-margin { margin: 30px 0 !important; } } ``` 2. 若使用Vue框架,建议在打印容器元素上直接添加行内样式: ```html <div id="printBox" style="margin: 20mm; padding: 10mm"> <!-- 打印内容 --> </div> ``` 3. 浏览器兼容性处理:同浏览器对@page规则支持度同,建议通过打印预览测试效果 ### 四、完整示例 ```javascript // 打印函数调用 printJS({ printable: 'printContent', type: 'html', style: '@page { margin: 1in; } #printContent { padding: 20px; }', scanStyles: false, css: ['/static/print-styles.css'], // 自定义CSS文件 font_size: '12pt' // 兼容性设置[^2] }); ``` [^1]: 引用[4]指出PrintJS的默认边距设置可能受浏览器默认样式影响,建议强制覆盖 : 引用[2]的字体大小解决方案同样适用于边距设置,通过干扰默认样式实现自定义 [^3]: 引用[3]说明禁用全局样式(globalStyles: false)可避免样式污染
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值