php - 动态改变css元素宽度

Question

我在页面或帖子中有以下简码：

[custom_width width='500' color='red']

[custom_width width='600' color='blue']

简码功能是显示 2 个具有各自宽度的按钮。问题是按钮使用最后一个宽度 600 显示相同的宽度。

功能：

<?php
    function xyz ($attr) {
        $xyzwidth = $attr['width'];
        $xyzcolor = $attr['color'];
        my_style($xyzcolor);
?>

    <style type="text/css">
        .mystyle {
            width: <?php echo $xyzwidth; ?>px;
        }
    </style>

    <div class="mystyle">
        My Text
    </div>

<?php } ?>

注意：css 的其余部分在它自己的 .css 文件中

function  my_style($xyzcolor) {
    switch ($xyzcolor) {
        case 'red': my_red();
            break;

        case 'blue': my_blue();
            break;
    }

<?php function my_red() { ?>
   <style type="text/css">
    .mystyle {
        ............
    }
    .mystyle: hover {
        ............
    }
    .mystyle a {
        ............
    }
    .mystyle a:hover {
        ............
    }
    </style>

<?php } ?>

Answer 1

如果您mystyle在两个按钮上使用相同的类 ( )，则在该类上定义的最后一个宽度将应用于两个元素。

出于您的目的，您可能最好：

<?php
    function xyz ($attr) {
        $xyzwidth = $attr['width'];
?>

  <div style="width: <?php echo $xyzwidth; ?>px">
      My Text
  </div>

<?php
    }
?>

Answer 2

一般定义您的blue和redCSS。不是每次都在你的循环中。像这样的东西：

<style type="text/css">
    // red
    .mystyle.red {
        ............
    }
    .mystyle.red:hover {
        ............
    }
    .mystyle.red a {
        ............
    }
    .mystyle.red a:hover {
        ............
    }

    // blue
    .mystyle.blue {
        ............
    }
    .mystyle.blue:hover {
        ............
    }
    .mystyle.blue a {
        ............
    }
    .mystyle.blue a:hover {
        ............
    }
</style>

在您的xyz函数中，为您的 div 提供所需的类，并设置widthdiv 内部：

<?php
    function xyz ($attr) {
        $xyzwidth = $attr['width'];
        $xyzcolor = $attr['color'];
        my_style($xyzcolor);
?>

    <div class="mystyle <?php echo $xyzcolor; ?>" style="width: <?php echo $xyzwidth; ?>px;">
        My Text
    </div>

<?php } ?>