Question

如何在迭代中动态调整元素的样式

在test.phtml页面

<?php foreach($tests => $test) { ?>
    <li class="<?php echo $test['class'] ?>">
    <a href="#" title="">
        Test Instance
    </a>
    <style type="text/css">
        li.<?php echo $test['class'] ?> a:hover {
        color: <?php echo $test['color'] ?>;
        background-color: <?php echo $test['bgColor'] ?>;
        }
    </style>
    </li>
<?php } ?>

样式标签即将进入页面。

<li class="third-item">
    <a href="#" title="">
        Test Instance
    </a>
    <style type="text/css">
        li.third-item a:hover {
        color: #498995;
        background-color: #dbe7ea;
        }
    </style>
</li>

但是，这些风格对网页没有影响。

请帮我解决这个问题...

Answer 1

您应该在htmldocument的head-section中定义内部样式。访问http://www.w3schools.com/css/css_howto.asp。
您可以使用循环为头部和后面的标记定义变量，并在正确的位置回显它们。

Answer 2

您可以使用这样的内联样式标记。

<li style="color:<?php echo $test['color']; ?>;background-color: <?php echo $test['bgColor'] ?>;"><a>Test</a></li>

我修改了你的代码检查它。

 <?php foreach($tests => $test) { ?>
 <style type="text/css">
            li.<?php echo $test['class'] ?> a:hover {
            color: <?php echo $test['color'] ?>;
            background-color: <?php echo $test['bgColor'] ?>;
            }
        </style>
        <li class="<?php echo $test['class'] ?>">
        <a href="#" title="">
            Test Instance
        </a>
        </li>
    <?php } ?>

如何在迭代中动态调整元素的样式？

2 个答案: