**問題描述：**

a元件放到text元件內部，a元件的style中文字顏色是動態繫結的，修改繫結textcolor的值，無法改變a元件的文字顏色，比如我希望文字顏色能從原始顏色藍色變成紅色。程式碼如下所示：

template中程式碼：

```java
<text>
            <a href="https://huawei.com" style="color: {{textcolor}};" value="click here" rel="nofollow"></a>
        </text>
         <input type="button" value="修改a的文字顏色" onclick="changeColor">
```

script中程式碼：

```java
changeColor: function() {
          this.textcolor="red";
        }
```

**問題分析：**

a元件放到text元件內部時，快應用框架不支援動態改變樣式。

**解決辦法：**

藉助text去實現a的動態效果，直接在text元件上繫結樣式（a元件自身不繫結），可以達到效果，程式碼如下（見紅色部分）：

**<text style="color: {{textcolor}};">
      <a href="https://huawei.com" value="click here" rel="nofollow"></a>
</text>**

**效果圖（點選按鈕後）：**
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201201104127370.png)

欲瞭解更多詳情，請參閱：

快應用開發指導文件：[https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper](https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper)

---
原文連結：
[https://developer.huawei.com/consumer/cn/forum/topic/0204399557167870123?fid=18](https://developer.huawei.com/consumer/cn/forum/topic/0204399557167870123?fid=18)

作者：AppGallery Connect

a元件在text元件內不能動態修改樣式，怎麼破？

相關文章