How to access the buttonStyle object inside of one button using JavaScript in QML 5.2

qml, qt

Solution

Answering to your question, you should define public property like:

Button {
    id: root

    property color backgroundColor: pressed ? 'skyblue' 
                                            : mousearea.entered ? "lightsteelblue" 
                                                                : "#2e2e2e"
    ...

    MouseArea { id: mousearea; ... }

    style: ButtonStyle {
        background: Rectanlge { color: root.backgroundColor; ... }
    }
}

and then use is property to override default implementation.

But,

You are trying to use styles in a completely wrong way. `Style` is a visual representation of `Control`'s state and should't be changed manually in run-time. So, a proper way is to bind control properties to style (e.g. using property `control`).

style: ButtonStyle {
    background: Rectangle {
         color: control.hovered ? 'lightsteelblue' 
                                : 'skyblue'
    }
}

Problem

Below is my Qml code: ``` Button { id: newMenu anchors { top: topMenu.top topMargin: 15 left: topMenu.left leftMargin: 16 } text: "New" iconSource: "../images/New.png" MouseArea { id: mouseArea anchors.fill: parent hoverEnabled: true //this line will enable mouseArea.containsMouse onClicked: { newProjectFileDlg.visible = true } onEntered: { console.log(tt1); } } style: ButtonStyle { id: buttonStyle background: Rectangle { id: tt1 implicitWidth: 100 implicitHeight: 25 border.width: 0 radius: 4 color: mousearea.entered ? "lightsteelblue" : "#2e2e2e" } } ``` I want to access this button's style property, change the background.color when mouse is hover. But the console.log outpu is always ``` qrc:/qmls/menu.qml:40: ReferenceError: tt1 is not defined ``` How to get the element using JavaScript? Or do we have other approach to change background color when mouse is entered.

Original source