1

Estoy implementando un diálogo para cerrar la session de usuario, usando las webix. Para ello, uso la siguiente función:

const app.login = {
  showLogout: function( ) {
    var win = webix.ui( {
          view: 'window',
          id: 'LOGIN.LOGOUT',
          head: 'Close this session ?',
          position: 'center',
          move: true,
          modal: true,
          width: 450,
          height: 200,
          body: {
            rows: [
              { template: 'Do you want to end the session ?' },
              { cols: [
                  { view: 'button', type: 'danger', value: 'Yes, exit', id: 'LOGOUT.YES' },
                  { view: 'button', type: 'form', value: 'No, continue' }
                ]
              }
            ]
          }
        } ),

    win.show( );
  }
};

Lo anterior funciona bien, y genera la siguiente ventana flotante:

introducir la descripción de la imagen aquí

Quisiera cambiar el color de fondo del head de la ventana (la zona del título). Es una ventana peligrosa, y me gustaría que la cabecera tuviera el mismo color de fondo que el botón Yes, exit. Como las webix admiten pieles (configurables para cada usuario), no puedo generar un estilo fijo, porque podría no coincidir con el aspecto del botón para ese usuario/piel concreto.

He intentado obtener el backgroundColor del botón, y asignarlo a mano a la cabecera, usando el inspector de elementos de las dev-tools para obtener los datos necesarios:

showLogout: function( ) {
  var win = webix.ui( {
        ...
      },
      head = document.getElementsByClassName( 'webix_win_head' )[0],
      button = document.querySelectorAll('[view_id="LOGOUT.YES"]')[0];

      head.style.backgroundColor = button.style.backgroundColor;
}

Pero no he conseguido el resultado buscado. El encabezado de la ventana permanece testarudamente con el fondo blanco.

¿ Como aplico el color de fondo (y a ser posible, el del texto) del botón danger a la cabecera ?

Edito

La jerarquía de elementos que me muestran las dev-tools para la ventana flotante es la siguiente:

<div class="webix_view webix_window" role="dialog" tabindex="0" aria-label="Close this session ?" view_id="LOGIN.LOGOUT" style="border-width: 1px; display: none; width: 450px; height: 200px;">
  <div class="webix_win_content">
    <div class="webix_win_head">
      <div class="webix_view" view_id="$template2" style="width: 450px; height: 36px;">
        <div class=" webix_template"></div>
      </div>
    </div>
    <div class="webix_win_body">
      <div class="webix_view webix_layout_line" view_id="$layout3" style="width: 450px; height: 164px;">
        <div class="webix_view" view_id="$template1" style="border-width: 0px 0px 1px; margin-left: 0px; margin-top: 0px; width: 450px; height: 134px;">
          <div class=" webix_template"></div></div><div class="webix_view webix_layout_line" view_id="$layout4" style="white-space: nowrap; border-left-width: 0px; border-right-width: 0px; border-bottom-width: 0px; margin-left: 0px; margin-top: -1px; width: 450px; height: 30px;">
            <div class="webix_view webix_control webix_el_button" view_id="LOGOUT.YES" style="display: inline-block; vertical-align: top; border-width: 0px; margin-top: 0px; margin-left: 0px; width: 226px; height: 30px;"></div> 
            <div class="webix_view webix_control webix_el_button" view_id="$button1" style="display: inline-block; vertical-align: top; border-width: 0px; margin-top: 0px; margin-left: -1px; width: 225px; height: 30px;"></div>
        </div>
      </div>
    </div>
  </div>
</div>

1 respuesta 1

1

Esta expresión:

button.style.backgroundColor

Te retornará un string vacío si el elemento en cuestión no tiene explícitamente un background-color dentro del atributo style.

Para obtener el color del botón a partir de su clase css, debes hacer uso de getComputedStyle. Para esto puedes crear una función utilitaria que reciba el nodo del cual extraer los estilos y la propiedad deseada.

const getCssRule = (el, prop) => {
  const style = window.getComputedStyle(el)
  return style[prop]
}

Ejemplo

showLogout: function() {
  var win = webix.ui({
     ...
  },
  head = document.getElementsByClassName( 'webix_win_head' )[0],
  button = document.querySelectorAll('[view_id="LOGOUT.YES"]')[0];

  head.style.backgroundColor = getCssRule(button, 'background-color');
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.