Question

我有一个按钮可以从 .btn-1获取样式。：

const MainTabNavigator = createBottomTabNavigator({
    Home: HomeStack,
    MultiBar: {
        screen: () => null,
        navigationOptions: ({navigation}) => ({
            tabBarIcon: () => (
                <CustomTabBarBottom />
            )
        }),
        params: {
            navigationDisabled: true
        }
    },
    Video: VideoStack

}, {
  tabBarComponent: props =>
    <TabBarComponent
      {...props}
    />,
    tabBarOptions: {
    showLabel: false,

  },

});


export default MainTabNavigator;

在脚本中，我有三个变量，将它们组合为一个字符串以在按钮上创建渐变颜色：

<a id="button1" class="btn btn-1">Hover me</a><br>

然后我要将此“ 颜色” 变量应用于背景图像，以使按钮具有不同的渐变颜色。

我尝试了两种不同的方法，一种使用 document.querySelector ，另一种使用jQuery $（'。btn.btn-1'）。css ，但是没有一种方法有效（它不会更改按钮的颜色）：

var color1 = "#fdceaa";
var color2 = "#FFFFFF";
var color3 = "#FFFFFF";
var color = 'linear - gradient(to right, ' + color1 + ' 0 % , ' + color2 + ' 51 % ,' + color3 + ' 100 % )'

控制台没有错误...

完整代码：

document.querySelector('.btn.btn-1')['background-image'] = color;
$('.btn.btn-1').css('background-image', color);

https://developer.apple.com/documentation/scenekit/scnnode/1408050-scale

Answer 1

更新：

另一个答案实际上是正确的，实际问题是%符号前的空格。手动将代码移到上方时，我将其清除：

var color = 'linear-gradient(to right, ' + color1 + ' 0 % , ' + color2 + ' 51 % ,' + color3 + ' 100 % )';

应该是：

var color = 'linear-gradient(to right, ' + color1 + ' 0% , ' + color2 + ' 51% ,' + color3 + ' 100% )';

这是CodePen https://codepen.io/anon/pen/bzZmrm-请注意，您可以使用CSS和JS框输入各自的代码。

Answer 2

这是罪魁祸首：

var color = 'linear - gradient(to right, ' + color1 + ' 0 % , ' + color2 + ' 51 % ,' + color3 + ' 100 % )';

如前所述，linear - gradient之间不应有空格，而应为linear-gradient。另一个问题是步骤的百分比中也有空格。 0 %应该是0%。

如果删除空格，将获得预期的结果。但是，为避免因使用串联运算符动态构建字符串而引起的问题，我邀请您来看看template literals。

这是使用模板文字的相同语句。我个人发现阅读起来比较容易混淆。

var color = `linear-gradient(to right, ${color1} 0%, ${color2} 51% , ${color3} 100%)`;

最后，除了使用函数构建background-image值之外，这里还有CodePen的用法。希望它将为您提供一个方向。

Answer 3

好，首先开始：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  var color1 = "#fdceaa";

您不应将这样的脚本组合在一起，而应使用单独的标签：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var color1 = "#fdceaa";
// ...
</script>

第二，当您在脚本标签中添加代码时，该代码将在浏览器读取该脚本标签后立即运行（即，当它首次加载页面时）。但是，您不希望它在加载时执行任何操作，而是希望它在用户悬停时执行某些操作。

为此，您必须设置一个称为事件监听器的东西（在加载时）。首先像以前一样设置您的颜色变量：

var color1 = "#fdceaa";
var color2 = "#FFFFFF";
var color3 = "#FFFFFF";
var color = 'linear - gradient(to right, ' + color1 + ' 0 % , ' + color2 + ' 51 % ,' + color3 + ' 100 % )'

然后，设置您的偶数侦听器，在本例中为“悬停”侦听器：

$('.btn.btn-1').hover(e => {
  // This code will be run when the user hovers over .btn.btn-1
  // Also note that this should be background-color, not background-image
  $('.btn.btn-1').css('background-color', "red");
  // You could also use $(e.target) or $(this) instead of $('.btn.btn-1')
});

现在，当有人将鼠标悬停在您的按钮上时，代码将运行，您可以将动态值替换为硬编码的red。

使用JavaScript和自定义变量动态更改按钮的CSS

3 个答案: