javascript修改DIV标签下的TABLE元素的属性问题

Question

例如：有如下HTML片段     <div id="mydiv" style="overflow:hidden;position:relative;left:0;top:0;z-index:8998;width:100%;height:100%;">
   <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="z-index:8998;overflow:hidden;">
    <tr>
<td align="center" valign="middle" nowrap="nowrap" width="100%" style="text-overflow:clip;overflow:hidden;font-family:宋体;font-size:9pt;font-weight:normal;font-style:normal;text-decoration:none;line
-height:100%">设置</td>
    </tr>
   </table>
</div>想利用JS动态修改“设置”按钮的"line-height属性，该如何实现？

Answer 1

<div id="mydiv" style="overflow:hidden;position:relative;left:0;top:0;z-index:8998;width:100%;height:100%;">
   <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="z-index:8998;overflow:hidden;">
    <tr>
<td id="wc" align="center" valign="middle" nowrap="nowrap" width="100%" style="text-overflow:clip;overflow:hidden;font-family:宋体;font-size:9pt;font-weight:normal;font-style:normal;text-decoration:none;line
-height:100%">设置</td>
    </tr>
   </table>
</div><script type="text/javascript">
window.onload = function () {
var wc = document.getElementById("wc");
wc.style.lineHeight = "30px";
};
</script>
不过看不出效果，因为你设置了line-heigth也梅效果。

Answer 2

参考：
obj.style.lineHeight = [];

Answer 3

注意，因为原始html中，div下的table 和 TD都没有ID/name

Answer 4

<div id="mydiv" style="overflow:hidden;position:relative;left:0;top:0;z-index:8998;width:100%;height:100%;">
   <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="z-index:8998;overflow:hidden;">
    <tr>
<td align="center" valign="middle" nowrap="nowrap" width="100%" style="text-overflow:clip;overflow:hidden;font-family:宋体;font-size:9pt;font-weight:normal;font-style:normal;text-decoration:none;line
-height:100%">设置</td>
    </tr>
   </table>
</div><script type="text/javascript">
window.onload = function () {
var wc = document.getElementById("mydiv").getElementsByTagName("td")[0];
wc.style.lineHeight = "30px";
};
</script>
昂，一样的道理。。

Answer 5

因为html代码是PB11动态生成的，我想修改其中按钮生成时的外观效果，原始的效果会将中文按钮的文字最上边削掉一点，很难看，发现只要修改line-height：150% 即可改正，那怎么做呢？

Answer 6

muxrwc 帮我解决了大问题，谢谢各位！只是发现有些按钮修改了，有些又没有修改，但它们都是由PB11按相同的结构生成HTML的啊

Answer 7

实际问题已经解决了，补充一下：PB11 build6501 能将PB做的C/S程序直接转换成.net2 的B/S应用，即WebForm。应用中发现一些问题，所以需要修改系统带的JS文件以及增加自己的JS处理。以上就是本人应用中发现如果按钮文字是9pt大小的中文，就会出现上面描述的现象，所以，我增加了一个函数，在页面初始化后客户端调用如下函数即可解决：function My_AlterButton ( )
{
var allButtons = document.getElementsByTagName("button");
var itag = 0;
for (var i=0; i<allButtons.length; i++)
{
    oButton = allButtons[i];
    if(oButton.pbtype="button")
    {
var wc = document.getElementById(oButton.id + "_div").getElementsByTagName("td")[0];
wc.style.lineHeight="150%";
    }
}
}但发现有些页面的document.getElementById(oButton.id + "_div")提示“为空或不是对象”进一步考察研究中...........

Answer 8

昂，解决啦偶闪了。。
那个是不是因为oButton.id = 空导致的？

Answer 9

oButton.id 是不会为空的。从 document.getElementById(oButton.id + "_div").getElementsByTagName("td")[0]; 看，为何没有table的说明？生成的HTML代码有如下结构
<button pbtype="button" id="xxxx" ....>
  <div id="yyyyy" .....>
    <table 无ID 无name .....>
      <tr>
         <td ....>按钮文字</td>
      </tr>
    </table>
  </div>
</button>

Answer 10

你这里写错了。。
if(oButton.pbtype="button")改成if(oButton.pbtype=="button")
并且正规的话应该改成if(oButton.getAttribute("pbtype") =="button")

Answer 11

哦，原因找到了：有些图片按钮生成HTML时，其DIV标签内没有ID号，所以出错，同时因为出错，后面的按钮就不能继续处理了，这样就产生有些按钮改了，而有些又没有改，改进的函数如下：
function My_AlterButton ( )
{
var allButtons = document.getElementsByTagName("button");
for (var i=0; i<allButtons.length; i++)
{
    oButton = allButtons[i];
    if(oButton.pbtype="button")
    {
oDiv = document.getElementById(oButton.id + "_div");
if(oDiv) {
var wc = document.getElementById(oButton.id + "_div").getElementsByTagName("td")[0];
wc.style.lineHeight="150%";
}
    }
}
}

Answer 12

按muxrwc的指正，继续修改：
function My_AlterButton ( )
{
var allButtons = document.getElementsByTagName("button");
for (var i=0; i<allButtons.length; i++)
{
    oButton = allButtons[i];
    if(oButton.getAttribute("pbtype")=="button")
    {
oDiv = document.getElementById(oButton.id + "_div");
if(oDiv) {
var wc = document.getElementById(oButton.id + "_div").getElementsByTagName("td")[0];
wc.style.lineHeight="150%";
}
    }
}
}应该算圆满了！谢谢！