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和red CSS。每次都不在你的循环中。像这样：

<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设为所需的类，并设置div内部的width：

<?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 } ?>

动态改变css元素的宽度

2 个答案: