Question

如果颜色字符串是数字，那么我们可以使用RegExp来检查它是否是有效的CSS颜色。但如果这是一个词呢？

我有从颜色参数动态生成控件的代码。但是，不是颜色，而是null，""或随机单词。有没有办法用Javascript检查颜色名称？

更新：非常感谢您的回答！ :) 我的最终版本如下（添加toLowerCase()支票，因为颜色可以是"Green"，"Red"等。）

function isValidColor(strColor) {
  var s = new Option().style;
  s.color = strColor;

  // return 'false' if color wasn't assigned
  return s.color == strColor.toLowerCase();
}

Answer 1

这是一个检查当前浏览器中颜色名称支持的简单函数：

import React, { Component } from "react";
import { connect } from "react-redux";
import { Text, View, TouchableOpacity, StyleSheet,Image ,TextInput,Button} from "react-native";
import Icon from 'react-native-vector-icons';
import { login } from "../Actions/actionCreator";

class LoginScreen extends Component {
  static navigationOptions = {
    title: "Login"
  };

  constructor(props){
      super(props);
      this.state = {
          username:'',
          password:''
      }
  }

  doLogin(username,password)
  {

  }

  render() {
    return (
      <View style={styles.rootContainer}>

          <Image
              style={styles.logo}
              source={require('/Users/apple/Desktop/redux-react-navigation-demos-authFlow/src/images/logo.png')}
          />

          <Icon
              name='user'
              color='#000'
              size={14}
          />

          <TextInput
              onChangeText={username => this.setState({ username })}
              value={this.state.username}
              style={styles.textInput}
              placeHolder="Username"
          />
          <TextInput
              onChangeText={password => this.setState({ password })}
              value={this.state.password}
              style={styles.textInput}
              placeHolder="Password"
          />

          <Text style={styles.textGreen}>Forget Your Password</Text>


          <Button
              onPress={() => {
                  this.doLogin(this.state.username, this.state.password)
              }}
              color="#ffffff"
              title="Sign In"
          >
            Sign In
      </Button>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  rootContainer: {
    flex: 1,
    backgroundColor: "cyan",
    justifyContent: "center",
    alignItems: "center"
  },
  textStyles: {
    textAlign: "center",
    color: "rgba(0,0,0,0.8)",
    fontSize: 16
  },
  touchableStyles: {
    marginTop: 15,
    backgroundColor: "black",
    paddingHorizontal: 50,
    paddingVertical: 10,
    borderRadius: 5
  },
    textGreen: {
        textAlign:"center",
        fontSize:16,
        color:'#7dc4a6'
    },

    logo: {
        width: 587,
        height: 112
    },

    textInput: {
        borderColor:'black',
        backgroundColor:'#D3D3D3',
        width:300,
        borderWidth: 1,
        borderStyle: 'solid',
        fontSize:15,
        borderRadius: 25,
    }

});

const mapDispatchToProps = {
  login
};


const Login = connect(null, mapDispatchToProps)(LoginScreen);

export default Login;

由于无效的CSS属性值不会持久存在，我们可以将尝试的设置值与我们要设置的值进行比较，如果匹配，我们知道颜色/属性是有效的。

请注意，这也会批准十六进制，RGB等。如果您的应用程序出现问题，您可以使用function isColor(strColor){ var s = new Option().style; s.color = strColor; return s.color == strColor; } // try it out isColor("red"); // true isColor("reds"); // false或两个屏幕显示这些内容。

Answer 2

这是测试任何CSS属性值的通用解决方案：

function validCssValue(cssProp,val){
    if(cssProp == "length") return false;
    if(val == "") return true;
    var style = new Option().style;
    if(style[cssProp] != "") return false;
    style[cssProp] = val;
    return style[cssProp] !== "";
}

new Option().style的所有属性在创建时将为空。只有有效值会更新属性，因此无效值会将属性留空。（长度是样式对象的属性，而不是CSS属性，因此我们需要拒绝尝试对其进行测试。）

Answer 3

我正在开发一个接受颜色名称或十六进制颜色的应用程序。 dandavis的答案仅适用于颜色名称，但不适用于十六进制颜色。 s.color (when assigning '#ff0000')中存储的值是RGB代码（在这种情况下为rgb(255, 0, 0)）。因此，比较s.color == strColor返回false。

因此，您需要将dandavis的解决方案与给定的here解决方案结合起来。

可能看起来像这样：

function isColor(strColor){
  var s = new Option().style;
  s.color = strColor;
  var test1 = s.color == strColor;
  var test2 = /^#[0-9A-F]{6}$/i.test(strColor);
  if(test1 == true || test2 == true){
    return true;
  } else{
    return false;
  }
}

Answer 4

可接受的答案几乎是正确的，但是某些颜色值将在某些浏览器上转换-至少Chrome会转换十六进制RGB值#000000' to rgb（0,0,0）`。

但是，如果将style.color设置为无效值，则在检查它时会得到一个空字符串：

const isColor = (strColor) => {
  const s = new Option().style;
  s.color = strColor;
  return s.color !== '';
}

Answer 5

输入通常与输出不正确。如果检查这些值的长度，则会在CSS2树中得到一个空字符串或一个值

function isColor(string) {
    var s = new Option().style;
    s.color = string;
    return s.color.length > 0;
}

Answer 6

我需要验证 CSS 颜色和所有其他属性。我发现 this wonderful solution 使用内置的 Web APIs CSS.supports() 方法更短、更健壮。

CSS.supports(propertyName, propertyValue)

CSS.supports('color','red') 
//True.
CSS.supports('color', '#007')
//True. 

CSS.supports('color', 'random')
//False. 
CSS.supports('colours', 'red')
//False.

Answer 7

<p class="red"></p>
<p class="yellow"></p>
<p class="white"></p>

$(funtion(){
var obj = $("p");
var ex = $(obj).eq(1);

   $("button").click(funtion(){
   alert(obj);
  });
});

这是否解决了这个问题？

Javascript - 检查字符串是否有效CSS颜色？

7 个答案: