在Polymer中通过JS更改CSS变量

时间:2015-08-13 18:53:15

标签: javascript css polymer

在我的Polymer项目中,我有一个工具栏,其颜色我想用JavaScript更改。由于Polymer在内部使用CSS变量 - paper-toolbar-background进行样式化,因此我无法执行style.color之类的操作。我找到了一个名为setProperty()的方法,但它并不适用于我。有没有人找到解决方案?

3 个答案:

答案 0 :(得分:15)

在元素的customStyle映射中设置变量值,然后调用updateStyle方法。

以下是通过修改其定义的自定义样式的值来更改其自身可见性的元素示例。变量也可以是外部的。

public class Scan extends Service {
final int notificationID = 1;
Notification foregroundNotification;
NotificationManager notificationManager;
ExecutorService executorService;
public IBinder onBind(Intent mServiceIntent){return null;}

@Override
public void onCreate(){
startInForeground();
notificationManager = (NotificationManager)                this.getSystemService(Context.NOTIFICATION_SERVICE);
executorService = Executors.newSingleThreadExecutor();
}

@Override
public int onStartCommand( Intent mServiceIntent,int flags, int startId) {
//super.onStartCommand(mServiceIntent, flags, startId);
executorService.execute(new Runnable() {
    public void run() {

        Log.v("Screen Checking", "Runnable successfully called");


        File First_Shot;
        File Second_Shot;
        boolean search = true;


        Bitmap sec;
        Bitmap current;

       try {
            Thread.sleep(30000);
            while (search == true) {


                Process capture = Runtime.getRuntime().exec("su -c screencap -p /storage/external_SD/first.png");
                capture.waitFor();
                Log.v("Screen Checking", "First screenshot taken 10 second wait");
                capture.destroy();
                Thread.sleep(10000);
                Process getit = Runtime.getRuntime().exec("su -c screencap -p /storage/external_SD/second.png");
                getit.waitFor();
                Log.v("Screen Checking", "Second screenshot taken");
                getit.destroy();


                First_Shot = new File("/storage/external_SD/first.png");
                Log.v("Screen Checking", "File Exists and File can be read" + First_Shot.exists() + First_Shot.canRead());
                Second_Shot = new File("/storage/external_SD/second.png");
                Log.v("Screen Checking", "File Exists and File can be read" + Second_Shot.exists() + Second_Shot.canRead());

                current = BitmapFactory.decodeFile("/storage/external_SD/first.png");
                sec = BitmapFactory.decodeFile("/storage/external_SD/second.png");
                Log.v("Screen Checking", "Bitmaps created sameAs check should be happening now");
                if (current.sameAs(sec) == true) {


                    Log.v("Screen Checking", "inside touch if they matched");
Process p = Runtime.getRuntime().exec("su -c input tap 400 314");
p.waitfor;
Log.v("Screen Checking", command successfully executed.")


                } else if (current.getConfig() == sec.getConfig() && current.getHeight() == sec.getHeight() && current.getWidth() == sec.getWidth()) {
                    Log.v("Screen Checking", "inside touch else-if Image Data was not the same");
                } else {
                    Log.v("Screen Checking", "Image Configuration or Dimensions were not the same see logs with the tag 'otherImageData'");
                    Log.v("otherImageData", "Current Config followed by Sec config" + current.getConfig() + sec.getConfig());
                    Log.v("otherImageData", "Current Height followed by Sec height" + current.getHeight() + sec.getHeight());
                    Log.v("otherImageData", "Current Width followed by sec width" + current.getWidth() + sec.getWidth());

                }
            }
        } catch (InterruptedException | IOException e) {
        }
    }
});
Log.v("Screen Checking", "onStartCommand Return just called");



return START_STICKY;
}

@Override
public void onDestroy(){
Log.v("Screen Checking", "onDestroy for the service was called, the executorService has called shutdownNow and super.onDestroy has been called.");
executorService.shutdownNow();
super.onDestroy();
}

void startInForeground(){
int notificationIcon = R.drawable.notificationimage;
String text = "It has begun";
long notificationTimeStamp = System.currentTimeMillis();
foregroundNotification = new Notification(notificationIcon, text, notificationTimeStamp);
String title = "Title";
String body = "Body";
Intent mainActivityIntent = new Intent (this, MainActivity.class);
PendingIntent pendingmainActivityIntent = PendingIntent.getActivity(this, 0, mainActivityIntent, 0);
foregroundNotification.setLatestEventInfo(this, title, body, pendingmainActivityIntent);
startForeground(notificationID, foregroundNotification);


}
  void setStatusText(String statusText){
    foregroundNotification.tickerText = statusText;
    notificationManager.notify(notificationID, foregroundNotification);
}

}

答案 1 :(得分:4)

基本上,

  1. 抓住元素
  2. 使用customStyle属性更改--paper-toolbar-background
  3. 运行element.updateStyles()
  4. 请参阅docs。 [编辑]如果您需要一个示例,我只需here

答案 2 :(得分:1)

为当前Polymer.Element设置CSS变量:

this.updateStyles({'--paper-toolbar-background': '#ed0'});

要全局设置变量:

Polymer.updateStyles({'--paper-toolbar-background': '#ed0'});