1

我正在尝试使用 javascript 将新元素（按钮）添加到 html 文件。这是工作脚本：

<div id="examples">
    <?php
    while ($row=mysql_fetch_array($result))
    {?>
    <script type="text/javascript">
        var element = document.createElement("input");
        element.type = "button";
        element.value = "Click me";
        element.id = <?=$row['id'];?>;

        var foo = document.getElementById("examples");
        foo.appendChild(element);
    </script>

    <?php
    }
    ?>
</div>

向 html 文件添加新元素的脚本，但我也想更改一些属性（例如：按钮大小）。

我有方法SetProperties(id, fontSize)如果我在应该创建元素时将它添加到代码中它不起作用，它甚至不会创建新元素。这是让我头疼的代码：

<div id="examples">
    <?php
    while ($row=mysql_fetch_array($result))
    {?>
    <script type="text/javascript">
        var element = document.createElement("input");
        element.type = "button";
        element.value = "Click me";
        element.id = <?=$row['id'];?>;

        var foo = document.getElementById("examples");
        foo.appendChild(element);

        *SetProperties(<?=$row['id'];?>, <?=$row['fontSize'];?>);*
    </script>

    <?php
    }
    ?>
</div>

这是更改新元素属性的函数：

<script type="text/javascript">
function SetProperties(id, fontSize)
{
    var btn = document.getElementById(id);
    btn.style.fontSize = fontSize + "px;";
}
</script>
4

5 回答 5

0 
You may try like this to avoid creating `buttons` at `client` side

<div id="examples">
        <?php
        while ($row=mysql_fetch_array($result))
        {?>
            <input type="button" value="Click me" id="<?=$row['id'];?>" style="font-size: 25px;" />
        <?php } ?>
    </div>
于 2013-05-24T21:06:35.453 回答
0

你可以试试这样

<style>
#examples [type=button]
{
    font-size:25px;
}
</style>

<div id="examples">
    <?php
    while ($row=mysql_fetch_array($result))
    {?>
    <script type="text/javascript">
        var element = document.createElement("input");
        element.type = "button";
        element.value = "Click me";
        element.id = <?=$row['id'];?>;

        var foo = document.getElementById("examples");
        foo.appendChild(element);

    </script>

    <?php
    }
    ?>
</div>
于 2013-05-24T20:29:17.717 回答
0 
<script type="text/javascript">
function SetProperties(id)
{
    document.getElementById(id).style.fontSize = 25 + "px";
}
</script>

<div id="examples">
    <?php
    while ($row=mysql_fetch_array($result))
    {?>
    <script type="text/javascript">
        var element = document.createElement("input");
        element.type = "button";
        element.value = "Click me";
        element.id = <?=$row['id'];?>;

        var foo = document.getElementById("examples");
        foo.appendChild(element);

        SetProperties(<?=$row['id'];?>, <?=$row['fontSize'];?>);
    </script>

    <?php
    }
    ?>
</div>
于 2013-05-24T20:45:06.757 回答
0

关于您的代码，请尝试仅使用字符串作为 id：

 element.id = "<?=$row['id'];?>";

 /* ... */

 SetProperties("<?=$row['id'];?>");

因为getElementById需要一个字符串。在某些情况下，JavaScript 可以将数字转换为字符串，但这取决于getElementById浏览器中的实现方式。

除此之外，您正在执行的代码可以以更好的方式实现：

  • 直接输出HTML
  • 使用 CSS 更改样式
  • 如果您需要将一些元数据与您的按钮相关联，以便您可以引用例如数据库 ID，请使用data属性，而不是弄乱 ID。

例如：

<div id="examples">
   <?php
     while ($row=mysql_fetch_array($result)) {?>
       <button class="do-something" data-row-id="<?=$row['id'];?>">Click me</button>
     <?php
     }
     ?>
</div>

然后在 CSS 中：

.do-something { /* set CSS properties */ }

此外，如果您需要添加点击处理程序，并且您有很多按钮，则可以将处理程序分配给按钮容器（示例使用 jQuery）：

 $('#examples').on('click', '.do-something', function () { /* handler */ });

这比为每个按钮分配点击处理程序更有效。

于 2013-05-24T20:43:12.060 回答
0

我同意@meagar——当你可以在服务器上完成所有事情时，为什么还要发出 JavaScript 呢？

以下是直接在服务器端添加元素的方法，而不是发出 JavaScript 然后在客户端添加元素：

<div id="examples">
    <?php
    while ($row=mysql_fetch_array($result))
    {?>
        <input type="button" value="Click me" id="<?=$row['id'];?>" />
    <?php } ?>
</div>

并为其设置样式，将其放入<head>您的 CSS 文件中或中：

<style>
    #examples input {
        font-size: 25px;
    }
</style>
于 2013-05-24T20:47:44.823 回答